Scrollable datatable header not aligning with the columns

[saurabh.bansal]

Hi All,

I tried by changing the width but scrollable datatable header is not aligning with the table columns..

Please advice.

[kukeltje]

My advice would be to search the forum first

Cheers,

Ronald

[kukeltje]

Oh and read one of the first posts in the forum (the one about 'read before posting')

[rdelaplante]

Try adding a style attribute to ALL of the p:columns

<p:column headerText="Column 1" style="width: 100px;">
#{bean.field}
</p:column>

[saurabh.bansal]

Hey! I have mentioned dat i hv tried by changing width. i hv already added style attribute..

[rdelaplante]

That is how I solved the problem in my application. I'm not sure what else to try other than searching the forums.

[saurabh.bansal]

still i hvnt found any solution..

[jimmybondy]

We are facing the same problem and could not find any solution:

Our table ...

• uses lazyDataModel
• has multiple sorting enabled
• has pagination enabled
• has single selectionMode
• has scrollable=true
• fixed width for ALL columns using style attribute (style="width: 150px;")

Table code:

Code: Select all

<p:dataTable id="resultList" value="#{searchBean.lazyDataModel}" var="entity"
        selectionMode="single" selection="#{searchBean.selectedEntity}" rowKey="#{entity.rdsEntityId}"
        scrollable="true" scrollHeight="350" style="overflow:auto"
        paginator="true" rows="15"
        paginatorTemplate="Page {CurrentPageReport} {FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="5,10,15,20,25,30,35,50" paginatorPosition="bottom" paginatorAlwaysVisible="false" 
        sortMode="multiple" 
        lazy="true" 
        draggableColumns="false" resizableColumns="false" >

Example for column code::

Code: Select all

<p:column sortBy="shortName" headerText="Short Name" rendered="#{searchBean.userRoleRDM}" styleClass="wrap" style="width: 100px;">
      <h:outputText value="#{entity.shortName}" escape="false" />
</p:column>

I have read the following threads and tried their solutions with no success:

• this thread
• p:datatable header misaligned with row columns
• SO: PrimeFaces 3.0 - p:dataTable headers do not line up with using scrollable=true
• SO: PrimeFaces datatable Scrollbar
• SO: Primefaces datatable header alignment

Also note:

• The problem appears in IE8 (not in FF)
• Using PF 3.5.0 and 4.0-SNAPSHOT

[kukeltje]

identyical problem, completely different version, 1.5 years later, so please create a new topic.

Neat post by the way... good description, references to what you did.... etc... compliments

I think your issue is

fixed width for ALL columns using style attribute (style="width: 150px;")

use the width attribute on the colum

[jimmybondy]

Hi Ronald,

Thank You for your quick answer.

I have tried the width attribute before and now tried it again with no success (cleaning browser cache before hand of course).
Here is the new thread: header not aligning with columns when scrollable enabled