0

I've made a stackblitz example here to show the issue: https://stackblitz.com/edit/primeng-toolbar-demo-u21zmt?file=src%2Fapp%2Fapp.component.html

When clicking the remove button the popup menu shows in the wrong place.

demo

I don't want to have to write custom CSS to position the menu every time I want to use it.

What am I doing wrong?

K-Dawg
  • 3,013
  • 2
  • 34
  • 52

1 Answers1

0

Switch the order in your html so

    <p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
      (click)="removeMenu.toggle($event)"></p-button>
    <p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>

becomes

    <p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
    <p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
      (click)="removeMenu.toggle($event)"></p-button>

This will make the menu appear under "remove"

PMO1948
  • 2,210
  • 11
  • 34
  • I'm not sure if this is quite right, the menus now appear on top of the buttons. So whilst they're correctly aligned horizontally they're not aligned vertically. It's definitely an improvement. – K-Dawg Apr 26 '21 at 15:41
  • also in primeng's stack blitz they put the menu under the button: https://stackblitz.com/edit/primeng-menu-demo?file=src%2Fapp%2Fapp.component.html – K-Dawg Apr 26 '21 at 15:43