Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

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

like image 613
Quentin Avatar asked Jan 23 '19 08:01

Quentin


People also ask

How to implement menu items in angular?

To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.

How to navigate to a particular route using matmenulistitem in angular?

If you are using angular routes in your application we can navigate to that particular route on mat menu click event. Or we can add another property to the MatMenuListItem which represents angular route to navigate so that we can avoid the above if loop check.

What is mat-menu-item selector?

mat-menu selector is used to display floating menu panel containing list of menu items. How to create Nested Menus or sub-menus? How to open mat menu programmatically? How to disable mat-menu-item ? Steps to implement Menu items in Angular applications.

What is the <mat-menu> element?

<mat-menu> is a floating panel containing list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive: The menu exposes an API to open/close programmatically.


2 Answers

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

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

See working code

like image 124
לבני מלכה Avatar answered Nov 10 '22 02:11

לבני מלכה


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:

enter image description here

like image 40
Quentin Avatar answered Nov 10 '22 02:11

Quentin