Position mat-menu on top of the trigger in Angular material

user_14075886 0
Viewed 14276

Hi i would like to position the mat-menu on top of the menu trigger. Please find my code below

<button (mouseover)="createMenuTrigger.openMenu() #createMenuTrigger="matMenuTrigger" [matMenuTriggerFor="createPlan"> OnHover </button>


<mat-menu #createPlan="matMenu">
   <button>Menu1</button>
   <button>Menu2</button
</mat-menu>

While running the above code the menu panel is showing bottom or top of the trigger. But it should open on top of the trigger.

Current Working Menu position: Menu is opening on top or below the trigger

Expected Menu panel: Menu panel should show on top the trigger 'onHover' button.

Please help me to resolve this UI change. I didnt get any valid solution for this change. Thanks in Advance

angular-flex-layout angular-material angular
3 Answers

You can "play" with the properties xPosition and yPosition, see MenuPositionX and menuPositionY

e.g.

<mat-menu #menu="matMenu" yPosition="above" xPosition="before">

Show the menú on top and on the left if there're enougth space.

You can also add class to the mat-menu using classPane

<mat-menu #menu="matMenu" class="myMenu">

And add in styles.css,e.g. (*)

{
   .mat-menu-panel.myMenu {
    margin-top: -100px;
}

(*) You need add the class in a .css general to all the aplication, you can not add the class in the component.css also you use ViewEncapsulation.None (this make that all the .css in your component is applied to all the aplication). The reason is that a mat-menu create the menu in a cdk-overlay that not belong to the component

user_85581860
user_139294600

If by "on top of" the trigger you mean above it in the Y dimension, you can use yPosition="above" as Eliseo writes. If instead you mean you want the menu above the trigger in the Z dimension (in other words, covering the trigger) you'll want to take PaperInFlames' suggestion but set the overlapTrigger to true:

<mat-menu #menu="matMenu" [overlapTrigger]="true"><mat-menu>
user_33077150
Related