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.
Datatable: (scrollable): size column size calculation defect for percentage-width or no width given
See original GitHub issueVersion: Primefaces 6.2.21
2) Expected behavior
when no width given, all columns should have same size and be distributed equally over the available scrollWidth
when width=“30%”, this should be 30% and not 30px!
3) Actual behavior
since commit https://github.com/primefaces/primefaces/commit/852741bf1376fc8e966441bffc9a82e80c601b15 to solve issue https://github.com/primefaces/primefaces/issues/4801
column width is NOT calculated correctly anymore, if NOT using box-sizing:border-box
-
30% is interpreted as 30px
-
and when no width given, its distributed over the window-width instead of the given scrollWidth
-
and columns on the left are small and further right columns get wider
4) Steps to reproduce
any datatable with scrollable=true
5) Sample XHTML
Primefaces 6.2.21 and
`<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" ><f:view contentType="text/html; charset=utf-8" >
<h:head></h:head>
<h:body>
<h3>Vertical</h3>
<p:dataTable var="car" value="#{testBean.cars}" scrollable="true" scrollWidth="600px" scrollHeight="150">
<p:column headerText="Id" footerText="Id" width="20%">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Brand" footerText="Brand" >
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Year" footerText="Year" >
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Color" footerText="Color" width="30%">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Horizontal and Vertical</h3>
<p:dataTable var="car" value="#{testBean.cars}" scrollable="true" scrollWidth="50%" scrollHeight="150">
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Id" footerText="Id" >
<h:outputText value="#{car.id}" />
</p:column>
</p:dataTable>
</h:body>
</f:view>
6) Sample bean
use the example bean https://www.primefaces.org/showcase/ui/data/datatable/scroll.xhtml
Issue Analytics
- State:
- Created 4 years ago
- Comments:18 (7 by maintainers)
Top Results From Across the Web
Scroller: issues with column width and row height - DataTables
1. column width if [code]"bAutoWidth": true[/code] then column width change while scrolling even though sScrollX and sWidth for each column ...
Read more >jQuery DataTables: control table width - Stack Overflow
This function will calculate the column widths that are needed based on the current data and then redraw the table - which is...
Read more >PrimeFaces 6.2.23 and 7.0.6 Released
... selection regression issue (7.0.6); Datatable: (scrollable): size column size calculation defect for percentage-width or no width given ...
Read more >Grid size and scroll - TreeGrid
Grid size and scroll. TreeGrid documentation. Describes how to control width and height of the whole grid and when and how to scroll...
Read more >Power Apps Tip: Flexible Width Gallery - Jamie Willis-Rose
TemplateHeight. btnColumn X, Y and Height. I don't want there to be a border, so I set Border to None.
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
workaround:
if (PrimeFaces && PrimeFaces.widget && PrimeFaces.widget.DataTable && PrimeFaces.widget.DataTable.prototype) { PrimeFaces.widget.DataTable.prototype.setOuterWidth = function(element, width) {element.width(width)}; }PR #6370
I tested it with a normal scrollable table and a frozen-column table. Seems fine so far.
Side note: a
widthincluding the unit will be handled correctely - except%. Those values will use the scrollWidth as a reference, because thats how browsers work. Maybe we should convert %-values to px-values using the width of.ui-datatable? But all other units likeem,vw, … will work.