CODEWITHSUNDEEP
angularangular-materialangular-flex-layout
Mcruz
Mcruz

Reputation: 53

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

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

Upvotes: 5

Views: 29690

Answers (3)

Jota
Jota

Reputation: 63

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>

Upvotes: 0

PaperinFlames
PaperinFlames

Reputation: 932

You can simply use [overlapTrigger]="false" in the mat menu like below:

<mat-menu #menu="matMenu" [overlapTrigger]="false"><mat-menu>

FIR : https://www.angularjswiki.com/material/menu/

Upvotes: 0

Eliseo
Eliseo

Reputation: 57941

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

Upvotes: 10

Related Questions