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

mat-menu panelclass
mat-menu focus first item
mat-menu-item (click)
mat-menu angular material
mat-menu position
matmenutriggerdata
mat-menu is not a known element
mat-menu close event

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

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

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

See working code

Angular Material mat-menu-item to be the same size as the , 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. I am quite new to Angular 5 and have just started learning it. Recently, I have been trying to create a menu bar with multiple menus for my app using Angular 5 Material. The menu will be triggered/

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:

Menu, Icons. Menus support displaying mat-icon elements before the menu item text. content_copy. link Nested menu . Material supports the ability for an mat-menu-item to open a sub-menu. To do so, you have to define your root menu and sub-menus, in addition to setting the [matMenuTriggerFor] on the mat-menu-item that should trigger the sub-menu:

Use menuOpened event for matMenuTriggerFor and add width runtime

HTML:

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue"  (menuOpened)="onMenuOpened()" id="button">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

TS:

onMenuOpened() {
    const btn = document.getElementById('revisitSection');
    if (btn) {
      const elems = document.getElementsByClassName('button') as any;
      // for (let i = 0; i < elems.length; i++) {
      //   elems[i].style.width = `${btn.offsetWidth}px`;
      // }
      for (const item of elems) {
        item.style.width = `${btn.offsetWidth}px`;
      }
    }
  }

I don't recommend to use ngDoCheck. it has more performance issue.

Customize angular material mat-menu-item to show items smaller in , Customize angular material mat-menu-item to show items smaller in size We can notice that the dropdown menu comes clean exactly below the icon Comparing this to the previous screenshot, the previous one look much more cleaner. I have just started using the Angular Material theme within my Angular app. I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles). So for now, I have

Angular Material mat-menu-item to be the same size as - html, 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  I have the following material menu: <a mat-button [matMenuTriggerFor]="menu" disabled="true">Menu</a> <mat-menu #menu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> </mat-menu> Notice that I have an <a> tag instead of a <button>. I want to disable the mat menu trigger.

Styling mat-menu items – Angular Days, Angular Material cuts off the item, displaying elipsis. html: <mat-menu #​playlistMenu="matMenu"> <button mat-menu-item> aaaa bbbb cccc  Material Design Components For Angular Part 3: Navigation This is the third part of the Angular Material series on CodingTheSmartWay.com. In this part we’ll be focusing on Navigation elements like Menu, Sidebar and Toolbar. Of course this third part assumes that you’re familiar with the Angular Material library in general and that you know how to setup an Angular project and install the

How to increase the width of the mat-menu-item?, onToolbarClick(menu)" class="notifications-dropdown"> <mat-icon Angular Material mat-menu-item to be the same size as the mat , max-width of the  Angular Material Dialog: A Complete Example Last Updated: 24 April 2020 local_offer Angular Material In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component.

Comments
  • replace .mat-menu-panel {width: 100%;} with .mat-menu-panel {width: 100%; padding: 0 10px;}
  • This won't work if you increase the width of the button. It also adds a padding to the left and right of the menu items thus breaking the material style of the menu.
  • In my project the button is responsive, the size is not fixed. I changed that in my StackBlitz
  • Ng deep is close to being deprecated. The equivalent to it is just adding the style in main styles.css file, without ng-deep of course.