Components: Add custom class to cdk-overlay-pane in menu

[artem-palamarchuk96]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

cdk-overlay-pane in menu have additional class to customize not only content of menu but all menu block

What is the current behavior?

There is no possibility to add custom class without hacks

What are the steps to reproduce?

http://joxi.ru/nAyM8MjtX6gb5A

What is the use-case or motivation for changing an existing behavior?

Want to have possibility to change all menu not only content inside

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

In case of adding only class i think it is doesnt matter

Is there anything else we should know?

No

[julianobrasil]

Have you tried panelClass input?

[artem-palamarchuk96]

panelClass it's not for overlay, its uses "on the menu template that displays in the overlay container. "

[julianobrasil]

So you want to change things like the transparent backdrop color? (Because the panelClass let you control the menu panel already.)

[artem-palamarchuk96]

i want to insert custom class here http://joxi.ru/EA4ZvZ5iD8pOxm, not in menu

[crisbeto]

I think it's a slippery slope if we start adding inputs for all the different elements that leads us to having a bunch of inputs that just proxy classes. You can still add a class to the .mat-menu-panel by having a class on the mat-menu element.

[artem-palamarchuk96]

ok, maybe property like backdropClass in dialogs can be added?

[fenta23]

it's nice that you guys addressed this feature. But would it be possible to merge it in the current stable version published on npm?

MaterialDesignGuid advice to add a semi transparent white overlay on mobile devices behind floating action buttons menues. With this feature you can add such a class on the cdk overlay.

Because Angular 6 is still rc and a lot of modules are not adopt to it, i can not switch to your latest version.

Or do you have an advice how to get this in 5.2.5 ?

Thanks, Micha.

[chocho01]

I succeed to add css for panel with [backdropClass]="'full-width'" and the css :

.cdk-overlay-container .full-width + * > .cdk-overlay-pane {
   width: 100%;
}

[Robstaer]

@chocho01

Can you provide your code in more detail? I'm trying to style the .cdk-overlay-pane for the mat-autocomplete without it affecting the .cdk-overlay-pane for my mat-menu of another element! But i don't know which element can have this [backdropClass]="full-width". I tried it on the mat-autocomplete, but it says that [backdropClass] is not a known input !
Thank you in advance =)

[julianobrasil]

Take a look (on docs) at classList: string. It's not exactly what you want, but maybe it helps a little bit.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}