primeng
primeng copied to clipboard
overflow of large table inside fieldset
Describe the bug
I want to display a very large table inside a container that is set to take 100% of the parent on width, and 75% height of the parent. The parent container is a PrimeNG Fieldset.
The table is configured so that
- columns are resizable
- each cell, td and th, are configured to:
- have no line break
- have an ellipsis truncation in case the text is truncated if not enough space is available
The whole layout is using a series of flexbox instructions to display the different elements on the page. It's like a quite typical application:
- the application body fills the whole space 100wv and 100hv
- collapsible left side menu
- topbar
- main content in the rest of the screen
In the main content page, I am trying to implement 2 fieldsets sharing the vertical space 75% - 25% In the upper fieldset I would like to put a large table: both horizontally and vertically large.
- I would expect the table to be contained inside the fieldset, but unfortunatelly, the table overflows vertically "above" the 2 fieldsets.
- As I set the cells resizable and truncable I would expect that, horizontal wise, there would not be also an overflow outside of the viewport, but rather the columns to be set at a size so that everything fits on the screen but truncated. I tried to put some style on the th to fix the size, but apparently the size is not taken into account.
I would like if possible to get some help on how to configure with the right classes or styles to achieve my goal.
Thank you.
Snapshots:
table overflow horizontally:
... and vertically + above the fieldset:
Environment
Windows, Chrome
Reproducer
https://github.com/alaindeurveilher/primeng-table-example
Angular version
18.1.3
PrimeNG version
17.18.8
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
20.15.0
Browser(s)
Chrome
Steps to reproduce the behavior
Clone/fork and build the demo application:
https://github.com/alaindeurveilher/primeng-table-example
Expected behavior
Table should be contained inside the fieldset parent container, without overflowing outside of the viewport, ie being displayed on 100% of the visible space on the screen.
Expectation: something like this for the horizontal (but also scrollabled inside the fieldset for the vertical part):