PrimeNG toolbar button with dropdown appears in the wrong place

0
votes

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?

1
javascriptprimengprimeng-menu

1 Answers

0
votes

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"