How to increase the width of the mat-menu-item?

Question

<div fxHide fxHide.xs="false" fxHide.md="true">
  <button mat-icon-button [matMenuTriggerFor]="menu" class="my-menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let menu of repoService.toolbarMenu" class="mr-4" (click)="repoService.onToolbarClick(menu)"
    class="notifications-dropdown">

      <mat-icon *ngIf="menu.icon" aria-label="menu.key" class="mr-4">{{menu.icon}}</mat-icon>
      <span class="notification-row">{{menu.displayKey | translate}}</span>

    </button>
  </mat-menu>

Css File

.mat-menu-panel.notifications-dropdown {
      max-width:none;
      width: 100vw; 
      margin-left: -8px;
      margin-top: 24px;
      overflow: visible;
  }
  
  .notification-row{
      width: 424px;
  }
    

I have already tried this, but it doesn't work for me!

md-menu override default max-width in Angular 2

Answer 1

i had the same issue and solved it by overriding the mat-menu-panel max width property:

::ng-deep.mat-menu-panel {
  max-width: none !important;
}

hope it helps

Answer 2

https://material.angular.io/components/menu/api

@Input('class') panelClass: string

This method takes classes set on the host mat-menu element and applies them on the menu template that displays in the overlay container. Otherwise, it's difficult to style the containing menu from outside the component.

<mat-menu class="my-class" ... >

component css (needs ng-deep due to cdk-overlay):

::ng-deep {.mat-menu-panel.my-class { width: 400px; } }