Reputation: 392
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:
But when the content is long enough to require scrolling, the trigger is overlapped:
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
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