CODEWITHSUNDEEP
angularangular-material
NDJ2212
NDJ2212

Reputation: 3

Angular mat-menu appearing outside page

I'm using Angular 8 to develop an app where I'd like to use a customised context menu. I'm using Material v8.2.3 for this, and tried to implement the basic example from here.

However, when clicking on the button now, the context menu appears at the bottom of the page rather than at the location of the click (or on the button). Any ideas why this is happening? (See attached image)

Much like their example, I've only included the necessary HTML (tried to wrap it in a div but made no difference): 

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

I've used exactly the same imports and exports they've used in the example.

Many thanks!

Upvotes: 0

Views: 1546

Answers (1)

Saad Abbasi
Saad Abbasi

Reputation: 853

There is not space for items to display, but You can "play" with the properties xPosition and yPosition

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" yPosition="below">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

you can also use a class and set margin-top.

Here is an official guide for positioning

Upvotes: 1

Related Questions