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?
!important
or a more powerful selector (e.g. including the parents etc)?.mat-menu-panel.notifications-dropdown
styles to a global stylesheet instead of your component styles. Also see this guide.mat-menu-panel.notifications-dropdown { max-width:600px !important; width: 100vw; margin-left: -8px; margin-top: 24px; overflow: visible; }