Scrollable PrimeNG table breaks body width when all expandable rows are collapsed

0
votes

:-)

I use 2 features of the PrimeNG table (<p-table>, Version 8) in combination:

This works quite well as long as the table is indeed scrollable: enter image description here

But when to many rows are collapsed the table is smaller than the threashold scrollHeight I configured at the p-table. That makes the scrollbar go away so that the table body fills up that space - without the header getting wider too: enter image description here

What I tried so far

  • Force the scrollbar: According to this article giving an html element the css style overflow-y: scroll enforces the scrollbar to allways be visible. However the scrollable element I deal with here is generated by PrimeNG and so far I couldn't overwrite it's style
  • Use position: sticky to make the header follow: I already blowed hours in applying that attribute to the header. It never took effect. Thats why I tried this with the scrollable function of p-tablein the first place.

May the force be with you!

1
cssangularprimengprimeng-datatable

1 Answers

0
votes

This workaround works for me with vertical scrollbar always be shown:

body .ui-table-scrollable-body {
    overflow-y: scroll;
}