0

I'm using Primeng and I can't display correctly this menu when the button is clicked. As you can see on this image, the menu displays outside of the table header far away from the button. What I need is the menu displays just below from the button as this prototype.

<ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between mb-2">
        <h3 class="m-0"> Lista de evaluaciones
        </h3>
        <button pButton pRipple label="Agregar evaluación" icon="pi pi-folder" (click)="menu.toggle($event)"
            class="p-button-primary mr-2"></button>
    </div>
    <p-menu #menu [popup]="true" [model]="items"></p-menu>
</ng-template>

I thought the problem was the p-menu outside de div but if it's in there the flex align-item-center justify-content-between of Primeflex moves the elements. Thanks for the help.

Ricardo Ruíz Alarcón
  • 85
  • 8

1 Answers1

0

The solution is to put the p-menu element outside of the caption, where the table styles cannot affect it:

<p-table [value]="customers" dataKey="id" [rows]="10">
  <ng-template pTemplate="caption">
    <div class="flex align-items-center justify-content-between mb-2">
      <h3 class="m-0">Lista de evaluaciones</h3>
      <button
        pButton
        pRipple
        label="Agregar evaluación"
        icon="pi pi-folder"
        (click)="menu.toggle($event)"
        class="p-button-primary mr-2"
      ></button>
    </div>
  </ng-template>
</p-table>

<p-menu #menu [popup]="true" [model]="items"></p-menu>

StackBlitz

skink
  • 5,133
  • 6
  • 37
  • 58