如何删除Angular Material Design菜单框滚动条 [英] How to remove Angular Material Design Menu Box Scroll Bars

问题描述

我的Web应用程序的右上角有一个菜单项，下面是代码.问题是，它很宽，并且没有拉伸，它只是向菜单添加了一个滚动条，我尝试了一堆css对其进行修复，但似乎无法弄清楚.

I have a menu item in the top-right corner of my web app, and the code is below. Problem is, it's wide, and instead of stretching, it just adds a scrollbar to the menu and I tried a bunch of css to fix it but can't seem to figure it out.

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

UPDATE: I've added overflow: hidden !important; as suggested in one of the answers, and that removed the scrollbar, but now it isn't wide enough and so I can't access all the buttons. Tried width: 800px !important with the overflow, but it didn't change the width.

<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

style.css

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

推荐答案

您需要添加.mat-menu-panel隐藏的溢出:.

You need to add overflow: hidden to .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主文件中.

Add to the main CSS file.

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

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

I've created a plunker to show you how to remove the scrollbar See example plunker https://plnkr.co/edit/wDPmRi?p=preview

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

One problem with you wrapping the md-menu-item into two groups is that it breaks the md-menu keyboard event managment which is used for the tabbing functionality. So you loose user experience.

对于您所需要的，弹出窗口是一个更好的主意，它仍然实现了焦点捕获.您可以在此处使用此弹出窗口.

For what you need maybe a popover is a better idea, which still implements focus trapping. You could use this popover here.

这篇关于如何删除Angular Material Design菜单框滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！