Table headers unaligned with "scrollable" and "sortBy"

Post Reply
joseperaza
Posts: 3
Joined: 27 Dec 2014, 20:11

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:

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.

aragorn
Posts: 3762
Joined: 29 Jun 2013, 12:38

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,

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest