如何删除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屋!