primeng icon indicating copy to clipboard operation
primeng copied to clipboard

overflow of large table inside fieldset

Open alaindeurveilher opened this issue 6 months ago • 0 comments

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.

  1. I would expect the table to be contained inside the fieldset, but unfortunatelly, the table overflows vertically "above" the 2 fieldsets.
  2. 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: table-overflow-02

... and vertically + above the fieldset: table-overflow-03

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): table-overflow-04

alaindeurveilher avatar Aug 16 '24 16:08 alaindeurveilher