Table headers unaligned with "scrollable" and "sortBy"

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



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.

[mert.sincan]

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,