Question

我在角应用程序中有一个菜单溢出页面（从屏幕右侧消失）。

我已经尝试了一些测试应用程序，它似乎总能正常工作（材料在边界框中运行并将菜单向左推，直到它适合）。

有没有人有任何想法可以运行什么类型的css或js将菜单推到屏幕上。或者，如果有一个父元素，我可以包装菜单按钮来帮助它？（在bootstrap 3中存在类似的问题，需要使用父内联元素进行下拉而不执行此操作。）

有问题的应用程序非常复杂，并且有侧导航等，菜单实际上有很多组件。但我已经尝试过移植菜单的html，直到它位于app-root（或其第一个加载的组件）之下，但它仍然是错误的。

我会堆栈发生了什么，但测试应用始终有效:( :(

以下是代码示例 - 但显然这不是问题：

<div class="text-right">

    <button mat-raised-button [matMenuTriggerFor]="menuTest">
      Actions&nbsp;&#9660;
    </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>

编辑：如果有帮助 - （工作）示例总是在cdk-overlay上获得“正确”的css属性（大约8px）。但是（破碎的）生产菜单的“左侧”为“1806.81px”。

Answer 1

尝试分配样式为“溢出：隐藏；”的垫子升起按钮也许？

<button style="overflow: hidden;" mat-raised-button [matMenuTriggerFor]="menuTest">
  Actions&nbsp;&#9660;
</button>

Answer 2

所以不确定为什么它不起作用。但是将dir =“rtl”放在 BUTTON （不是菜单）上似乎可以使它工作。

Angular材料mat-menu溢出屏幕

2 个答案: