angular/material 6 menu only opens in top left

Question

I have upgraded to [email protected], angular/[email protected], [email protected] My working apps have the menus now opening in the upper left instead of tied to the trigger. I ran the default cli install and added this to app.component.html

<button mat-fab color="primary"  [matMenuTriggerFor]="menu">Menu</button>
<mat-menu class="myMenu" #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

MatMenuModule is imported. The only way i have been able to move the open menu is by through this css which is a terrible kludge.

.myMenu {
    position: absolute;
    top: calc(figure out using nnvh - nnpx);
    left: calc(figure out using nnvw - nnpx);
}

the only issue is the position of the menu - all of this worked just fine @5.x.x. Now my working apps appear broken.

Answer 1

Make sure to use also the latest material CSS file that is provided in the material/ prebuilt-themes directory as following class seems to be needed now to make the menu work properly:

.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;}