Angular/Material 6菜单只在左上角打开

Question

我已经升级到angular@6.0.2，angular/material@6.0.2，cli@6.0.3。我的工作应用程序中的菜单现在打开在左上角而不是与触发器绑定。

我运行了默认的cli安装，并将其添加到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。我曾试图通过以下css方法来移动“打开”菜单，但这只是一个可怕的权宜之计。

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

唯一的问题是菜单的位置-所有这些都非常好@5.x.x。现在我的工作应用程序出现了故障。

- Cliff Smith

---

哈哈，我有和你类似的问题，如果你解决了，写出解决方案吧。 - devmrh

你有找到关于这个问题的任何信息吗？我们刚刚更新了我们的应用程序，现在出现了这个问题！！ - Jonathan Anctil

有没有人解决了这个问题？ - dazzed

Answer 1

请确保使用 material/ prebuilt-themes 目录中提供的最新 material CSS 文件，因为下面的类现在似乎是必需的，以使菜单正常工作：

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

- MaxTheMax

---

这解决了我的问题，我将@angular/cli升级到@6.0.5（以防万一），添加了@angular/material和@angular/cli@latest（6.1.0）。在演示项目上运行ng serve并添加一个微不足道的菜单 - 现在它正好打开应该打开的位置。我花了很多时间来摆弄这个，甚至将工作菜单重新做成*ngFor列表，这真是太麻烦了。这是一个很好的教训，当你有一个工作的应用程序时不要更新... - Cliff Smith

是的，在升级到Angular 6时我错过了这一步。我的应用程序有一个自定义主题文件，因此使用node-sass重新构建以生成新的app.theme.css将新样式注入@angular/material/theming之上，现在我的MatMenus可以正常工作了！ - TonyM

我仍然在使用@angular/cli - 6.1.2和@angular/material - 6.4.7时遇到此问题。 - Saurabh

Answer 2

对我来说，我需要添加这个类来解决这个问题:

.cdk-overlay-pane {
   position: absolute;
}

- Aurélien Penot