question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Layout: dataTable with percentage scrollHeight is wrongly sized

See original GitHub issue

Describe 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:

  1. Open non-maximized browser window.
  2. Go to http://localhost:8080/primefaces-test/
  3. See only some rows visible out of 25. See no scrollbar. image
  4. Resize the window by dragging. See scrollbar appear. image
  5. Maximize the window. See wrong table height again. image

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:closed
  • Created 2 years ago
  • Comments:21 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
mellowarecommented, Sep 30, 2021

OK this will be in 10.0.7 and 11.0.0! Thanks for the PR!

0reactions
mellowarecommented, Oct 22, 2021

8.0.5 and 10.0.7 with this fix are in Maven Central.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found