Page 1 of 1

Table headers unaligned with "scrollable" and "sortBy"

Posted: 14 Oct 2019, 16:26
by joseperaza
Hello.

I'm having the described issue rendering tables in my application. I'm using Primefaces 7.0 and Babylon 3.0.1. What happens is that headers and rows don't match when I've activated both scrollable (in the table definition) and sortBy (on any column).

Removing scrollable fixes the problem as does removing every single sortBy on column definitions. I need the both, though, so I would rather not do that. Following is an image showing what happens:

Image

An example of my table definition:

Code: Select all

<p:dataTable id="tableList"
    value="#{myController.supplierTypeList}"
    var="item"
    reflow="true"
    resizableColumns="true"
    draggableColumns="true"
    scrollable="true" scrollHeight="200">
 
        <p:column selectionMode="multiple" width="30"
	        exportable="false"
	        style="text-align:center;" toggleable="false" />
        ...
     	<p:column headerText="#{msgGlobal['lbl.description']}" width="300"
		style="padding-left:10px;" toggleable="false"
		sortBy="#{item.description}">
		<h:outputText id="txtDescription" value="#{item.description}"
			style="margin-left:10px" />
		<p:tooltip for="txtDescription" position="top" />
	</p:column>
	...
Any help would be appreciated.

Re: Table headers unaligned with "scrollable" and "sortBy"

Posted: 23 Oct 2019, 10:18
by aragorn
Thanks a lot for the sample. Please try;

Code: Select all

<style type="text/css">
    .ui-datatable-scrollable-header *,
    .ui-datatable-scrollable-theadclone * {   
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    body .ui-datatable .ui-datatable-scrollable-body::-webkit-scrollbar {
        width: 15px;
    }
</style>
Fixed for next version.

Best Regards,