如何删除角质材料设计菜单框滚动条

我在我的web应用程序的右上角有一个菜单项，代码如下。问题是，它很宽，而不是拉伸，它只是添加一个滚动条到菜单中，我尝试了一堆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; 
}

来源

2017-07-23 Jus10

你也应该附加CSS。但是我会在溢出，溢出-x或溢出-y处下注。但我确实看到了一些指示柔性盒的东西。看到这里[指南]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。 – JGFMK

呵呵，这个css只是内联的，有点像''而且我尝试过不同的元素，在任何地方做任何事。我会检查这个flexbox指南。 – Jus10

这是一个很棒的教程！我预订了它，谢谢！不幸的是，我认为在这种情况下问题出现在flexbox容器之前。如果我在md-menu项目后立即添加另一个div，宽度为500px，它仍然会添加一个滚动条，但现在可以添加到500px的区域。所以它使它更宽，但即使在使用flexbox之前，md菜单的宽度似乎也是固定的。 – Jus10

您需要添加溢出：隐藏到.MAT菜单面板。

<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向您展示如何使用您的包裹MD-菜单项中删除滚动条查看范例plunker https://plnkr.co/edit/wDPmRi?p=preview

一个问题分成两组的是，它打破了MD-菜单键盘事件管理，用于选项卡功能。所以你失去了用户体验。

对于您所需要的，也许popover是一个更好的主意，它仍然实现焦点陷印。你可以使用这个popover here。

来源

2017-07-23 17:55:47

Plunker似乎只是说“加载角度材料应用程序...”并获取大量404错误。但我确实这样做了，它删除了滚动条！ Wohoo！我现在似乎无法改变下拉的宽度，所以右侧的按钮被切断，即使是！重要的下一个溢出：隐藏，我似乎仍然无法改变那个宽度。谢谢你这个btw！ – Jus10

我已经修复了闯入者的进口问题。素材团队移动了他们的@ angular/cdk的位置。我会尝试改变宽度并更新蹲球。 –

您需要添加'max-width：none！important;'例如查看plunker styles.css。 –

如何删除角质材料设计菜单框滚动条

回答

相关问题