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

angularangular-materialangular-material2cssdrop-down-menu

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:

enter image description here

And what I wish:

enter image description here

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".

Best Answer

Use ::ng-deep to style .mat-menu-panel

::ng-deep .mat-menu-panel {
  padding: 0 10px!important;
  width: 100%!important;
}

See working code

Related Topic