角材料垫菜单溢出屏幕

Question

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

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

有没有人知道可以运行什么样的 css 或 js 将菜单推送到屏幕上。 或者如果有一个父元素我可以包装菜单按钮来帮助它？ （引导程序 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 （不是菜单）上似乎可以使它工作。