Angular Material 2 md-Menüposition

Question

aus irgendeinem Grund scheint das md-Menü immer links vom auslösenden Element zu erscheinen.

Siehe this plnkr für ein Beispiel.

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

Gibt es eine Möglichkeit, das zu kontrollieren?

Ich möchte das Menü in der Mitte der Schaltfläche angezeigt werden, oder wo der Klick gemacht wurde.

Vielen Dank!

Answer 1

md-menu bietet nur die Position before und after für positionX. Es gibt also keine dokumentierte Möglichkeit, das Menüfeld zu verschieben.

Wenn Sie die Position Ihres Triggerelements kennen, können Sie eine CSS-Überschreibung hinzufügen, um das Menüfenster zu verschieben.

Hier ist ein Beispiel:

css:

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

Plunker demo