Angular mat-menu

Question

I want to make a big matmenu (95 items) but it goes over the page.

see my code :

 <mat-menu #departements="matMenu"> <button mat-menu-item (click)="choix_du_departement(01)" >01</button> <button mat-menu-item (click)="choix_du_departement(02)" >02</button> <button mat-menu-item (click)="choix_du_departement(03)">03</button> ... <button mat-menu-item (click)="choix_du_departement(95)">95</button> </mat-menu>

I tried to manage via .scss with

 .mat-menu{ max-height: 50px; }

but nothing change

I tried to modify .mat-menu-item too but some it goes off the page

Answer 1

If I understand, you need to set the height of the button

 .mat-menu-item{
   max-height: 50px;
 }

Answer 2

您有两个选择，要么为您的mat-menu元素提供一个 mat-menu 类，要么将您的 CSS 选择器更改为mat-menu而不是.mat-menu

Answer 3

我也在努力应用这个 css，而是将内容包装在一个带有自定义类的 div 中，并设置了该 div 的高度。

Answer 4

::ng-deep .cdk-overlay-pane {
        max-height: 350px !important;
      }