Angular Material mat-menu-item to be the same size as the mat-menu button

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.


.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}


<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
  <div fxLayout="row" fxLayoutAlign="center center">
    <span fxFlex>OPTION</span>

<mat-menu #menu=“matMenu”>
<button mat-menu-item>
<button mat-menu-item>

I did a StackBlitz HERE for my mat-menu.

Thank you in advance!

#css #angular

4 Likes400.25 GEEK