PrimeNG p-table scrollable scrollHeight last row p-dropdown to open upwards

Viewed 1766

Using following config:

"@angular/cli": "^7.3.9", "primeng": "7.0.5",

I have a page that uses PrimeNG's <p-table> which is scrollable and has a scrollHeight set to 100%. This table is wrapped within a div that has fixed height of 300px.

Created Stackblitz: https://stackblitz.com/edit/angular-ejdubg

Every row has a p-dropdown. In top rows when dropdown is opened, it opens downwards which is acceptable but when dropdown in the last row is opened, it open downwards too but should open upwards which is the default behavior of the p-dropdown.

Any suggestions what could be wrong here.

1 Answers

You need to add appendTo="body" on p-dropdown

<th *ngFor="let col of columns" [ngSwitch]="col.field">
                <p-dropdown appendTo="body" [options]="brands"></p-dropdown>
            </th>
Related