Prime Community Forum

Posted: **14 Oct 2019, 16:26**

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.

Posted: **23 Oct 2019, 10:18**

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,

Prime Community Forum

Table headers unaligned with "scrollable" and "sortBy"

Table headers unaligned with "scrollable" and "sortBy"

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