CODEWITHSUNDEEP
angularangular-materialangular-material2
Stark Buttowski
Stark Buttowski

Reputation: 1849

xPosition and yPosition in mat-menu not working

I tried xPosition and yPostion in angular material itself. but it is not working. I don't know whether am I missing something.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" xPosition="after">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

I referred few links which says the issue fixed. Refere here.

I couldn't figure it out.

Thanks in advance.

Upvotes: 6

Views: 12397

Answers (4)

Pujita R
Pujita R

Reputation: 21

Adding this to my styles CSS file worked seamlessly:

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

Upvotes: 2

TrickOrTreat
TrickOrTreat

Reputation: 911

This is a pain seriously, but i got a workaround. In a separate css file you can mention:

::ng-deep.mat-menu-panel {
/* These numbers are my requirement, put something which suits yours */
  transform: translate(0px, 32px); 
}

But if even after this change you are facing this problem, then take it to next step to overlay panel:

::ng-deep.cdk-overlay-pane{
  transform: translate(0px, 32px);
}

Good Luck. Hope this helps...

Upvotes: 8

Keti Kutateladze
Keti Kutateladze

Reputation: 51

This works perfectly for me. You don't miss anything. Code is correct. It depends on orientation where you're trying to add.

image1:

enter image description here

image2:

enter image description here

In these images there're the same code,in first photo there's no place below the button.

Upvotes: -1

Usr
Usr

Reputation: 2848

probably you solved it, but I'm posting this anyway, maybe it's useful for somebody.
If you follow the docs it should work perfectly (see #customizing-menu-position section).
The reason it might not work probably depends on the position you put the menu in: for example, if you're trying to open it with yPosition=above, it has to have enough space to open above, otherwise it will open below. Same for the xPosition.
I know this might sound stupid but for me it was the reason it didn't work.
HTML:

    <button class="myButton" mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu yPosition="above" #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>

CSS:

.myButton{
  margin-top: 90px;
}

Upvotes: 3

Related Questions