如何删除 Angular Material Design 菜单框滚动条答案

【问题标题】：How to remove Angular Material Design Menu Box Scroll Bars如何删除 Angular Material Design 菜单框滚动条
【发布时间】：2017-07-23 16:38:13
【问题描述】：

我的网络应用右上角有一个菜单项，代码如下。问题是，它很宽，而不是拉伸，它只是在菜单中添加了一个滚动条，我尝试了一堆 css 来修复它，但似乎无法弄清楚。

更新：我已按照其中一个答案的建议添加了overflow: hidden !important;，并删除了滚动条，但现在它不够宽，因此我无法访问所有按钮。尝试使用溢出的width: 800px !important，但它没有改变宽度。

<button md-fab [md-menu-trigger-for]="settings">
  <md-icon>settings</md-icon>
</button>

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu">
  <div style="display: flex; flex-direction: row; text-align: center">
    <div style="flex: 1; padding: 24px">
      <label>Left Side</label>
      <button md-menu-item routerLink=""> Option 1 </button>
      <button md-menu-item routerLink=""> Option 2 </button>
    </div>
    <div style="flex: 1; padding: 24px">
      <label>Right Side</label>
      <button md-menu-item routerLink=""> Option 3 </button>
      <button md-menu-item routerLink=""> Sign Out </button>
    </div>
  </div>
</md-menu>

style.css

.menu-overflow-hidden {
  overflow: hidden !important;
}

【问题讨论】：

你也应该附上 CSS。但我会在overflow、overflow-x 或overflow-y 上赌一把。但我确实也看到了一些表明 flexbox 的东西。请参阅这里的guide。
哦，css 只是内联的，像<md-menu x-position="before" #settings="mdMenu" style="width: 400px"> 这样的东西，我在不同的元素上尝试过，但它在任何地方都没有做任何事情。我会看看这个 flexbox 指南。
这是一个很棒的教程！我在书上注明了，谢谢！不幸的是，我认为在这种情况下，问题出现在 flexbox 容器之前。如果我在 md 菜单项之后立即添加另一个 div，宽度为 500px，它仍然会添加一个滚动条，但现在是 500px 宽的区域。所以它使它变宽了，但 md-menu 的宽度似乎是固定的，甚至在我使用 flexbox 之前也是如此。
溢出似乎也没有效果... :S
啊，对了所有重要的！重要的....从 J.J.B 溢出

标签： angular menu material-design

【解决方案1】：

您需要在 .mat-menu-panel 中添加溢出：隐藏。

<button md-fab [md-menu-trigger-for]="settings">
  <md-icon>settings</md-icon>
</button>

<md-menu class="menu-overflow-hidden" x-position="before" #settings="mdMenu">
  <div style="display: flex; flex-direction: row; text-align: center">
    <div style="flex: 1; padding: 24px">
      <label>Left Side</label>
      <button md-menu-item routerLink=""> Option 1 </button>
      <button md-menu-item routerLink=""> Option 2 </button>
    </div>
    <div style="flex: 1; padding: 24px">
      <label>Right Side</label>
      <button md-menu-item routerLink=""> Option 3 </button>
      <button md-menu-item routerLink=""> Sign Out </button>
    </div>
  </div>
</md-menu>

添加到主 CSS 文件。

.menu-overflow-hidden {
  overflow: hidden !important;
}

我创建了一个 plunker 来向您展示如何删除滚动条请参阅示例 plunker https://plnkr.co/edit/wDPmRi?p=preview

将 md-menu-item 包装成两组的一个问题是它破坏了用于制表功能的 md-menu 键盘事件管理。所以你失去了用户体验。

对于您需要的东西，弹出框可能是一个更好的主意，它仍然实现焦点捕获。你可以使用这个弹出框here。

【讨论】：

Plunker 似乎只是说“正在加载 Angular 材质应用程序...”并收到很多 404 错误。但我确实这样做了，它删除了滚动条！哇哦！！我现在似乎无法更改下拉菜单的宽度，因此右侧的按钮被切断，即使在溢出旁边有 !important：hidden，我似乎仍然无法更改那个的宽度.谢谢你的这个顺便说一句！
我已经修复了 plunker 上的导入。材料团队移动了他们的@angular/cdk 的位置。我现在将尝试更改宽度并更新 plunker。
你需要添加max-width: none !important;检查plunker styles.css 例如。
是的！工作完美。非常感谢！