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!
#css #angular