Table header alignment broken with scrollable="true"

UI Components for JSF
Post Reply
joseperaza
Posts: 2
Joined: 27 Dec 2014, 20:11

11 Oct 2019, 18:46

I'm having issues with the datatable component and header alignment. I've searched in the forum topics but none of the answers i've found have helped me resolve the issue.

When setting the scrollable attribute on the table, the alignment between header and data stops working. Without it it all works fine. We're using PrimeFaces 7.0 and Babylon theme 3.0.1.

An example of what it looks like with scrollable on:

Image

The code that generates the table is as follows:

Code: Select all

<p:dataTable id="tableList"
    value="#{myController.supplierTypeList}"
    var="item"
    reflow="true"
    resizableColumns="true"
    draggableColumns="true"
    scrollable="true" scrollHeight="200">
    
     <p:column headerText="#" width="10" toggleable="false"
	     styleClass="table-row-number table-column-onebutton">
	     <h:outputText class="title-row" value="#{rowNumber+1}" />
     </p:column>
 
     <p:column selectionMode="multiple" width="30"
	     exportable="false"
	     style="text-align:center;" toggleable="false" />

     <p:column sortable="false" width="10" toggleable="false"
	     styleClass="table-column-onebutton" exportable="false">
	     <p:commandButton icon="ui-icon-pencil fa fa-pencil"
		     action="#{myController.goToEdit}"
		     styleClass="secondary-btn">
		     <f:param name="id" value="#{item.id}"></f:param>
	     </p:commandButton>
     </p:column>
     ...
Any help would be appreciated.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Melloware and 4 guests