CODEWITHSUNDEEP
cssangularangular-material
Jakub Biernaczyk
Jakub Biernaczyk

Reputation: 392

How to prevent mat-menu from overlapping the trigger?

I'm trying to use mat-menu with a trigger that is not at the very top of the viewport, but about 100px below. I've made a reproductive example for it.

Link to the example: https://stackblitz.com/edit/angular-eqgwro?file=src/app/menu-icons-example.html

As long as the menu content is small, everything works as expected: enter image description here

But when the content is long enough to require scrolling, the trigger is overlapped: enter image description here

How can I prevent this overlapping? Is it a bug in angular-material? I tried [overlapTrigger]="false" [yPosition]="'below'" but it does not solve the problem

Upvotes: 1

Views: 792

Answers (1)

Mateut Alin
Mateut Alin

Reputation: 1295

You can add a CSS class to the mat-menu

<mat-menu #modulesMenu="matMenu" class="some-class-name">

and afterwards use ::ng-deep (even though they say it's deprecated) to set the max-height

::ng-deep .some-class-name {
  max-height: 300px;
}

In your particular example add in the component decorator

styles: ['::ng-deep .cdk-overlay-container .some-class-name { max-height: 300px;}']

Note 1: ::ng-deep .some-class-name should be outside :host, in case you are using it.

Note 2: Regarding the deprecation state of ::ng-deep there are several discussions about it and will not be removed soon.

Upvotes: 1

Related Questions