CODEWITHSUNDEEP
angularangular-material2
Wenneguen
Wenneguen

Reputation: 3408

Angular Material 2 md-menu position

for some reason, the md-menu seems to always appear on the left of the triggering element.

See this plnkr for an example.

<button md-button [mdMenuTriggerFor]="appMenu" style="width: 300px">
   BUTTON
</button>

<md-menu #appMenu="mdMenu">
  <button md-menu-item> Settings </button>
  <button md-menu-item> Help </button>
</md-menu>

Is there a way to control that?

I would like the menu to appear in the middle of the button, or where the click was made.

Thanks a lot!

Upvotes: 0

Views: 2480

Answers (1)

Nehal
Nehal

Reputation: 13297

md-menu provides only positon before and after for positionX. So, there's no documented way of moving the menu panel.

As a work around, if you know the position of your trigger element, you can add some css override to move the menu panel.

Here's an example:

css:

>>> .cdk-overlay-pane {
      left: 100px !important;
    }

Plunker demo

Upvotes: 1

Related Questions