How to apply z-index on PrimeNG dropdown

Question

I'm using Angular 18 and PrimeNG. I have a PrimeNG dropdown that is visually being clipped by a PrimeNG table footer. I've tried to apply a higher z-index on a variety of p-dropdown css classes, but with no success. Has anybody had any success showing all of a dropdown?

The following is an example: StackBlitz Dropdown-Demo

Answer 1

Add additional parameter appendTo="body" to your dropdown component.

<p-dropdown
          id="ExpenseTypeId"
          name="ExpenseTypeId"
          [options]="expenseTypes"
          [style]="{'width':'145px'}"
          #ExpenseTypeId="ngModel"
          appendTo="body"
          [(ngModel)]="addExpenseMiscGrid.ExpenseTypeId"
          placeholder="Select an expense"
        ></p-dropdown>

Here is an example: https://stackblitz.com/edit/bhiqq6-a2kjxv?file=src%2Fapp%2Fdropdown-editable-demo.html

Some additional resource to read about it: https://www.geeksforgeeks.org/angular-primeng-dialog-overlays-inside/