Layout: dataTable with percentage scrollHeight is wrongly sized
See original GitHub issueDescribe the bug dataTable with scrollHeight=“100%” calculates its actual height wrong, resulting in overflow with no scrollbar and other problems of this nature.
Reproducer primefaces-extensions-layout-datatable-scroll-height.zip
Environment:
- PF+PFE Version: 6.2.30+6.2.10, 10.0.0+10.0.6, 11.0.0-SNAPSHOT+10.0.6
- JSF + version: __
- Affected browsers: Firefox, Chrome
To Reproduce Steps to reproduce the behavior:
- Open non-maximized browser window.
- Go to http://localhost:8080/primefaces-test/
- See only some rows visible out of 25. See no scrollbar.
- Resize the window by dragging. See scrollbar appear.
- Maximize the window. See wrong table height again.
Expected behavior dataTable should be correctly sized and with a proper scrollbar.
Sample XHTML
<h:body style="width: 100%;">
<pe:layout>
<pe:layoutPane position="north" resizable="false" size="200" />
<pe:layoutPane position="center" resizable="false" styleContent="overflow:hidden;">
<p:dataTable value="#{[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25]}" var="row" scrollable="true" scrollHeight="100%" style="height: 100%">
<p:column>
row #{row}
</p:column>
</p:dataTable>
</pe:layoutPane>
<pe:layoutPane position="south" resizable="false" size="200" />
</pe:layout>
</h:body>
Sample Bean None.
Issue Analytics
- State:
- Created 2 years ago
- Comments:21 (12 by maintainers)
Top Results From Across the Web
How do you make dataTable height fit the remaining height ...
Hi, I'm trying to get dataTable to fit the remaining height available on a screen with the option scrollY: '100%' (without y overflow)....
Read more >How to fit a datatable into a panel with percentage max-height
The problem with this solution is that I want the datatable to be contained to a particular percentage of the screen - a...
Read more >DataTable Percentage scrollHeight Control Size Issue
The issue appears once the list is populated (~150 items); the control is vertically sized to just 2 items. Further, when resizing the...
Read more >Css resize table to fit screen - cittafamiglia.it
Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic ...
Read more >To adjust primefaces datatable size,live scrolling with screen ...
Also the height of the datatable should get adjusted with more number of rows for live scroll.Currently i have 15 rows for live...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
OK this will be in 10.0.7 and 11.0.0! Thanks for the PR!
8.0.5 and 10.0.7 with this fix are in Maven Central.