CODEWITHSUNDEEP
cssangular-material
SGR
SGR

Reputation: 2417

To display mat-menu items below the mat-menu button

I am using Menu with icons component.Here on clicking the button(i,e menu).The menu items(i,e mat-menu items) are displaying above the button as shown in below image.

enter image description here

I want the items(ex logout) to be displayed below the menu button.I tried giving margin and padding properties still no result.

Here is the stackblitz link.

Upvotes: 3

Views: 7790

Answers (1)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

If you just want to prevent the overlapping the trigger of the menu itself, the mat-menu has a custom attribute just for this. It is called overlapTrigger and if you set it to false, the menu-item won't overlap your trigger (the account icon). See example code below:

<mat-menu #menu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item>
       <mat-icon>power_settings_new</mat-icon>
       <span>Logout</span>
   </button>
</mat-menu>

Full example at forked stackblitz

You can read more about it right here.

Upvotes: 9

Related Questions