primeng icon indicating copy to clipboard operation
primeng copied to clipboard

TreeTable column resize destroys layout after browser size change

Open PranKe01 opened this issue 2 years ago • 9 comments

Describe the bug After resizing a column of a TreeTable, the layout is broken when the content size changes (for example when Browser size changes, or outer div size changes).

Environment Can be reproduced on PrimeNG showcase page.

Reproducer https://www.primefaces.org/primeng/treetable/colresize

Angular version 14.0.4

PrimeNG version

=14.0.0

Browser Google Chrome

Steps to reproduce the behavior Go the site https://www.primefaces.org/primeng/treetable/colresize

Make sure browser window is maximized. Resize "Size" column in "Fit Mode" table. Resize the browser window (reduce width).

Behaviour "Name" column is not visible anymore and scrollbar is visible (even when there would be enough space). No expand icons are available anymore. Some more issues apply for the other tables on the column resize page, too.

Expected behavior All columns should be visible, to make sure the table can be used. The column width should be in percentage.

PranKe01 avatar Nov 04 '22 08:11 PranKe01

Looks like the tables th width is calculated in fixed pixels. I could fix it, by recalculating the th width into percentage:

public ngAfterViewInit(): void {
    this.colResizeSubscription = this.treeTable.onColResize.subscribe(() => {
        const headerColumns = $('.p-treetable-thead th');

        let totalWidth = 0;

        for (let i = 0; i < headerColumns.length; i++) {
            totalWidth += parseFloat(headerColumns[i].style.width);
        }

        if (totalWidth > 0) {
            for (let i = 0; i < headerColumns.length; i++) {
                headerColumns[i].style.width = `${(parseFloat(headerColumns[i].style.width) / totalWidth) * 100}%`;
            }
        }
    });
}

Anyhow, it would be nice if the TreeTable itself would work with percentage instead of pixels, so that I can remove this dirty fix from my code.

PranKe01 avatar Nov 08 '22 08:11 PranKe01

@mertsincan Can you please add the BUG label?

PranKe01 avatar Nov 14 '22 10:11 PranKe01

@mertsincan Any update on this? Can I somehow help in reproduction?

PranKe01 avatar Jan 20 '23 13:01 PranKe01

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions[bot] avatar May 21 '23 01:05 github-actions[bot]

The issue is probably still open. Cant test it with primeng v15, because the whole column resizing does not work currently. When going to https://primeng.org/treetable#columnresize and trying to follow the reproduction steps, the column doesnt even resize...

PranKe01 avatar May 24 '23 07:05 PranKe01

@cetincakiroglu Column resizing does not work. As this is a quiet popular feature, I am wondering why nobody is fixing it?

PranKe01 avatar Jun 20 '23 05:06 PranKe01

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions[bot] avatar Oct 19 '23 00:10 github-actions[bot]

The issue still occurs.

PranKe01 avatar Oct 19 '23 07:10 PranKe01

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

github-actions[bot] avatar Feb 18 '24 00:02 github-actions[bot]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!

github-actions[bot] avatar Feb 25 '24 00:02 github-actions[bot]