2

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.

Kunal Dethe
  • 1,254
  • 1
  • 18
  • 38

1 Answers1

3

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>
Happy Coder
  • 1,293
  • 1
  • 19
  • 35
  • Updated the stackblitz as per your answer but it still opens downwards and goes below the table. It should open upwards. Please check. – Kunal Dethe Oct 21 '19 at 13:57
  • @KunalDethe i don't see that you updated the project. see the forked project is that what you needed? https://stackblitz.com/edit/angular-xheopx – Happy Coder Oct 21 '19 at 14:02
  • `appendTo="body"` helps to open the dropdown downwards and outside the table. I needed it to open upwards if no space is there below. ie. last row in the table. It does work out-of-the-box for `p-dropdown` and it did without `appendTo`. My problem was that someone set the `top` property to some `px` and `!important`.. which was wrong. Instead it should allow the dropdown to calculate `top` on its own. So its fixed now. Thank you. – Kunal Dethe Oct 23 '19 at 14:02