[英]Angular material mat-menu overflows screen
I've got a menu in an angular app which overflows the page (disappears off the right of the screen).我在一个有角度的应用程序中有一个菜单,它会溢出页面(从屏幕右侧消失)。
I've tried a few test apps and it always seems to work (material works out the bounding box and pushes the menu to the left until it fits).我已经尝试了一些测试应用程序,它似乎总是有效(材料在边界框内工作并将菜单向左推,直到它适合)。
Does anyone have any ideas what sort of css or js that could be running which would push the menu over the screen.有没有人知道可以运行什么样的 css 或 js 将菜单推送到屏幕上。 Or if there's a parent element i can wrap the menu button in aid it??
或者如果有一个父元素我可以包装菜单按钮来帮助它? (there was a similar problem in bootstrap 3 that required a parent inline element for drop downs to not do this).
(引导程序 3 中存在类似的问题,它需要一个父内联元素才能使下拉菜单不执行此操作)。
The app which has the problem is quite complicated and has side-navs etc and the menu actually sits quite a few components deep.有问题的应用程序非常复杂,并且有侧面导航等,菜单实际上包含很多组件。 But i've tried trasplanting the html for the menu until it's under the app-root (or its first loaded component) and it's still wrong.
但是我已经尝试为菜单移植 html,直到它位于 app-root(或其第一个加载的组件)下,但它仍然是错误的。
I'd stackblitz what's going on, but the test apps always work :( :(我会堆栈闪电战是怎么回事,但测试应用程序总是有效:( :(
Here's an example of the code - but obviously this isn't the problem:这是代码的示例 - 但显然这不是问题:
<div class="text-right">
<button mat-raised-button [matMenuTriggerFor]="menuTest">
Actions ▼
</button>
<mat-menu #menuTest="matMenu">
<button mat-menu-item>Test 1</button>
<button mat-menu-item>Test 2</button>
<button mat-menu-item>Test 3</button>
<button mat-menu-item disabled="disabled">
Test 4
</button>
<button mat-menu-item>
Test 5
</button>
</mat-menu>
</div>
Edit: If it helps - the (working) examples always get a "right" css attribute (of around 8px) on the cdk-overlay.编辑:如果有帮助 - (工作)示例总是在 cdk-overlay 上获得“正确”的 css 属性(大约 8px)。 But the (broken) production menu gets a "left" of "1806.81px".
但是(损坏的)制作菜单的“左侧”为“1806.81px”。
Try assign mat-raised-button with style "overflow: hidden;"尝试分配带有样式“溢出:隐藏;”的垫子凸起按钮maybe?
也许?
<button style="overflow: hidden;" mat-raised-button [matMenuTriggerFor]="menuTest">
Actions ▼
</button>
So not sure why it wasn't working.所以不知道为什么它不起作用。 But putting dir="rtl" on the BUTTON (not the menu) seems to make it work.
但是将 dir="rtl" 放在BUTTON (不是菜单)上似乎可以使它工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.