CODEWITHSUNDEEP
angularangular-material
acalvo
acalvo

Reputation: 415

Angular Material: recalculate position of mat-menu on height change

Suppose I have a mat-menu that changes its height a few moments after it is opened (due to a data load). At first it has 50px height and then it might have something like 200px. If its trigger is in the bottom side of the window, it might happen that the panel opens to the bottom (as there is enough space for the initial 50px height) but right after the load of the data it remains in the bottom side. I'd like to recalculate its position and act as if it had been closed and opened again (in that case the panel is opened above the trigger due to the lack of space in the bottom). Is there a way to do it?

You can test it in this simple stackblitz: https://stackblitz.com/edit/angular-lorwfh?file=app/menu-overview-example.ts

Upvotes: 2

Views: 1238

Answers (1)

Mateo Rincon
Mateo Rincon

Reputation: 49

Since there is not an exposed method yet to solve this problem, I have solved it by dispatching a resize event on purpose to force the menu to recalculate the position after new items are added/removed.

window.dispatchEvent(new Event('resize'));

Upvotes: 2

Related Questions