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
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/