Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

md-menu can't set max-width

See original GitHub issue

Bug

I’m trying to override the default 280px max-width of the .mat-menu-panel but it doesn’t work.

Plunker example

i’m using the latest 2.0.0-beta.3 cesium-cephalopod version, with chrome browser

Issue Analytics

State:
Created 6 years ago
Reactions:10
Comments:8 (5 by maintainers)

Top GitHub Comments

4reactions

ninanetercommented, May 11, 2017

Thank you! I’ve improved my example to better describe my problem. Now the toggle button is aligned to the right and the menu panel gets cut. If I use .cdk-overlay-container .mat-menu-panel instead of .cdk-overlay-container .mat-menu-panel.my-menu as the css selector, it works. But I want to apply it only with my specific .my-menu class.

It seems like the menu-panel is being positioned before my-menu class is added.

here is the code

4reactions

willshowellcommented, May 10, 2017

First, in your plunker, your stylesheet isn’t being included in the component. You must add the stylesheet to styleUrls.

Second, unfortunately you won’t be able to override the menu panel with your component styles due to view encapsulation. You will need to either turn view encapsulation off for this component or add the override styles to your global stylesheet.

Third, in order to actually override the styles on .mat-menu-panel, you’ll need to either use !important or increase your specificity by using multiple selectors, like .mat-menu-panel.my-overriden-menu.

https://plnkr.co/edit/iJH8g9y3wEyXQEPSiJ4C?p=preview

All that having been said, menu width should be more easily adjustable. The spec claims that it must be an increment of 56px, but the 280px max is only for mobile screens.