10

I'm using Angular 2 , Angular Material and I am willing to display more data in a md-menu and, therefore, I need to set the max-width of the md-menu to a higher value. Its default value is of 280px.

    <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> 
    <md-menu #appMenu="mdMenu"  [overlapTrigger]="false" yPosition="below" xPosition="before" class="notifications-dropdown">
        <button md-menu-item >
           <div class="row notification-row"> 
             <div>
               <span class="image-container"> Option 1 </span>
             </div>
           </div>
        </button>
    </md-menu>   

In CSS file, I do this:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

In console, I can identify the class where the default value is set: max-width:280px; , and when I edit it in my console, it works perfectly, but even though I try to override it in my CSS code, I am not able to do that. I tried this, also:

.mat-menu-panel{
    max-width: 600px;
} 

And this:

.cdk-overlay-container .mat-menu-panel{
     max-width:600px;
    width: 100vw;
    margin-left: -8px;
    margin-top: 24px;
}

How can I override this default value?

5
  • Have you tried !important or a more powerful selector (e.g. including the parents etc)? Commented Aug 23, 2017 at 13:46
  • 1
    Try adding the .mat-menu-panel.notifications-dropdown styles to a global stylesheet instead of your component styles. Also see this guide Commented Aug 23, 2017 at 13:47
  • Yes, I tried it this way: .mat-menu-panel.notifications-dropdown { max-width:600px !important; width: 100vw; margin-left: -8px; margin-top: 24px; overflow: visible; } Commented Aug 23, 2017 at 13:49
  • I used it with <style> tags in my index.html. No result. Commented Aug 23, 2017 at 13:50
  • Yes, when I put it this time not in my index.html with` <style>` tags, but I put it in my global CSS file, it worked. Yes, this is the answer. Thank you, @WillHowell ! Commented Aug 23, 2017 at 13:54

3 Answers 3

17

Set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can do exactly what you tried:

.mat-menu-panel.notifications-dropdown {
    max-width:none;
    width: 100vw; 
    margin-left: -8px;
    margin-top: 24px;
    overflow: visible;
}

.notification-row{
    width: 424px;
}

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

6
  • @AndreiMatracaru So this solution apply on every mat-menu components of the angular application? if yes, how to restrict it to a single component, and if possible on a single class like myMenu -> <mat-menu class="myMenu"> ... ?
    – Logan Wlv
    Commented Nov 20, 2018 at 9:15
  • whats the panelClass prop for then?
    – galki
    Commented Dec 16, 2018 at 11:26
  • 1
    Btw Github issue here.
    – galki
    Commented Dec 16, 2018 at 11:32
  • @galki panelClass is aliased to class
    – checketts
    Commented Feb 22, 2019 at 23:07
  • just min-width: unset !important worked stackoverflow.com/questions/63465373/…
    – rofrol
    Commented Sep 1, 2023 at 9:15
1

In some cases the wrapper over .mat-menu-panel can be .cdk-overlay-pane, in that case css should be something like this.

.cdk-overlay-pane.mat-menu-panel {
    max-width: your_custom_value
}

Due to the css specificity rules, 2 classes of specificity are required in order to override the defaults.

1

The same crazy problem for me... how I solved:

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  max-width: 436px;
}

At component SASS file

See: Angular Component Styles - View Encapsulation

and issue comment by @gaiki https://github.com/angular/material2/issues/4462

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.