Angular material mat-menu overflows screen

Question

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. 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).

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.

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&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>

Edit: If it helps - the (working) examples always get a "right" css attribute (of around 8px) on the cdk-overlay. But the (broken) production menu gets a "left" of "1806.81px".

Answer 1

Try assign mat-raised-button with style "overflow: hidden;"maybe?

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

Answer 2

So not sure why it wasn't working. But putting dir="rtl" on the BUTTON (not the menu) seems to make it work.