CODEWITHSUNDEEP
javascriptcssangularangular-material
Soswolf
Soswolf

Reputation: 25

Angular mat-menu

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

Upvotes: 0

Views: 3872

Answers (4)

pedram moradi
pedram moradi

Reputation: 11

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

Upvotes: 1

Ray_Hack
Ray_Hack

Reputation: 981

I struggled with getting this css applied also, instead I wrapped the content in a div with a custom class and set the height of that div.

Upvotes: 0

Mohammad Waleed
Mohammad Waleed

Reputation: 305

You have two options either give your mat-menu element a mat-menu class Or change your CSS selector to mat-menu instead of .mat-menu

Upvotes: 0

Tihomir Budic
Tihomir Budic

Reputation: 309

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

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

Upvotes: 2

Related Questions