How to scroll Angular Material mat-menu popup along with the page?

Question

After the mat-menu is triggered and items are shown, the popup elements are not scrolling along with the page. Instead they seem to be broken from the mat-menu icon and they are always visible as I scroll the page.

<mat-icon class="mat-accent" [matMenuTriggerFor]="menuOptions">menu</mat-icon> 

<mat-menu #menuOptions="matMenu"> <button mat-menu-item *ngFor="let menuItem of menuItems" (click)=selectMenuItem(menuItem)> {{menuItem.text}}</button> </mat-menu>

As shown in below picture, even though the initial menu-items popup appeared correctly, as I scroll the page, the popup elements are no longer attached to the above hamburger icon [which was attached with matMenuTriggerFor as shown in above code]

Answer 1

Issue will be fixed in the next version. For now you can do workaround in .mat-menu-panel set position: fixed!important;