primeng
primeng copied to clipboard
TreeTable column resize destroys layout after browser size change
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.
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.
@mertsincan Can you please add the BUG label?
@mertsincan Any update on this? Can I somehow help in reproduction?
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!
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...
@cetincakiroglu Column resizing does not work. As this is a quiet popular feature, I am wondering why nobody is fixing it?
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!
The issue still occurs.
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!
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!