I use mat-menu of Angular Material with different mat-menu-item and I would like the list of menu items to be the same size as the button.
That's what I have:
And what I wish:
I tried to change the size of the menu with the css, but it does not work properly.
CSS:
.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>
<mat-icon>unarchive</mat-icon>
<span>First</span>
</button>
<button mat-menu-item>
<mat-icon>file_copy</mat-icon>
<span>Second</span>
</button>
</mat-menu>
I did a StackBlitz HERE for my mat-menu.
Thank you in advance!
EDIT : I changed my code because I'm using a responsive button with the bootstrap class "btn-block".
To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.
If you are using angular routes in your application we can navigate to that particular route on mat menu click event. Or we can add another property to the MatMenuListItem which represents angular route to navigate so that we can avoid the above if loop check.
mat-menu selector is used to display floating menu panel containing list of menu items. How to create Nested Menus or sub-menus? How to open mat menu programmatically? How to disable mat-menu-item ? Steps to implement Menu items in Angular applications.
<mat-menu> is a floating panel containing list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: The menu exposes an API to open/close programmatically.
Use ::ng-deep
to style .mat-menu-panel
::ng-deep .mat-menu-panel {
padding: 0 10px!important;
width: 100%!important;
}
See working code
I found a solution really not clean, but here it is: StackBlitz HERE
If someone would have a CSS solution, I'm interested.
HTML:
<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue" id="button">
<div fxLayout="row" fxLayoutAlign="center center">
<mat-icon>more_vert</mat-icon>
<span fxFlex>OPTION</span>
</div>
</button>
TS:
export class AppComponent implements DoCheck{
ngDoCheck(){
var widthButton=document.getElementById("button").offsetWidth;
var elems = document.getElementsByClassName('mat-menu-panel');
for(var i = 0; i < elems.length; i++) {
elems[i].style.width = widthButton+"px";
}
}
}
CSS:
.cdk-overlay-pane {width: 100%!important;}
.mat-menu-panel {max-width: 100%!important; min-width: 64px!important;}
DEMO:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With