<p:dataTable> column headers not lined up if scrollable=true

[jim@jimtough.com]

I originally posted this as a question on Stack Overflow:
http://stackoverflow.com/questions/6536 ... lable-true

I have a JSF 2 webapp that is using PrimeFaces 3.0 components. On one page, I'm using the <p:dataTable> component inside a composite component to display a table of objects. I've had success with this component until I tried to use the scrollable="true" option. Now the table column headers do not line up with the column content. I have tried using IE 7 (which is the target browser for my client environment) and Firefox 4.0.1 for comparison. Both exhibit the problem, but it is more pronounced in IE 7.

IE 7 screenshot:



Firefox 4.0.1 screenshot:



Here is some of my Facelet page code:

Code: Select all

    <p:dataTable
         id="vesselsDataTable"
         value="#{cc.attrs.vesselAdapterList}"
         var="currentRow"
         selection="#{editVesselBean.selectedRow}"
         selectionMode="single"
         scrollable="true"
         height="500">
     <p:column
             id="imoColumn"
             style="width:45px"
             sortBy="#{currentRow.imo}">
         <f:facet name="header">
             <h:outputText value="IMO" />
         </f:facet>
         <div class="#{currentRow.imoStyleClass}">
             <h:outputText value="#{currentRow.imo}"
         </div>
     </p:column>
     <p:column
             id="notesIndicatorColumn"
             style="width:35px"
             sortBy="#{currentRow.hasNotes}">
         <f:facet name="header">
             <h:outputText value="#{bundle.labelNotes}" />
         </f:facet>
         <h:outputText
              styleClass="noteIndicator"
             id="vesselNotesIndicator"
             value="#{bundle.stringNoteIndicatorText}"
             title="#{currentRow.notesAsTooltipText}"
             rendered="#{currentRow.hasNotes}"
     </p:column>
     <ui:remove>other column definitions omitted for brevity...</ui:remove>
<p:dataTable>

Each of my columns has a style with a fixed width in pixels defined, and the dataTable itself has the height attribute set. This seems to be the same as what is shown in the Showcase demo and in the 2.2 manual PDF.

To quote the manual:

Scrolling is a way to display data with fixed headers, in order to enable simple scrolling set scrollable options to true, define a fixed height in pixels and set a fixed width to each column.

Can anyone tell me what I'm doing wrong?

I'm using the current PrimeFaces 3.0-M2 with Mojarra 2.1.1.

ADDITIONAL

Following the suggestions on Stack Overflow by Maple and BalusC, I have (temporarily) removed the column sorting and tried different doc types. I finally settled on the XHTML 1.0 Strict doc type. It does not show any improvement in IE 7, but does show some improvement in Firefox 4.

IE 7 with XHTML 1.0 Strict



Firefox 4 with XHTML 1.0 Strict



The <p:dataTable> is inside a <p:panel> which is inside a <p:layout>. Could this be related? I can't understand why Firefox 4 looks almost correct yet IE 7 is a hopeless mess. Again, this problem did not occur until I turned on scrollable=true.

[Timothy]

Has this issue been covered yet? I'm facing the same problem in my project with PF 3.0-M2.
If the scrollbar is not enabled the headers are lined up correctly, otherwise it's a mess in IE8. In Firefox 4 I don't have the issue.

To check, I viewed the primefaces showcase in both explorers, and in IE8 the datatable showcase reproduces the problem (with 3.0-M3)!
(http://www.primefaces.org/showcase-labs ... olling.jsf)

[kukeltje]

afaik, there still are some issues. I'm working on enhancing this, but I doubt my patches will be accepted and applied shortly. You sould at least give the table a fixed with afaik (not only the columns)

[Timothy]

I tried using a fixed width on the table, but this seems to make things even worse. I hope the enhancements won't take long...

[Oleg]

Hi,

That is a well-known issue. There are some posts about this. I found this one e.g. http://primefaces.prime.com.tr/forum/vi ... f=3&t=7685

[Timothy]

The topic you mentioned is about changing values inside a datatable. This topic is just loading data into a scrollable datatable.
By the way, my data is smaller than the width that I defined on the columns. The cells aren't editable at this moment so a css property like table-layout:fixed is not applicable.

[Matrium]

i do have the same problem (3.0.M2)

headers align correctly with columns as long as there are only a few rows in the table and the scrollbar is not displayed. but when the scrollbar is displayed the headers don't align anymore.

i use fixed width for every column.
my data is much smaller than the columns-width.
if i try to set a fixed width for the table itself everything gets worse and the headers don't align anymore at all (even with few rows = no displayed scrollbar).

[Timothy]

I used firebug to view the css that is applied on the cells of the primeface datatable. Seems there is padding on the cells (padding: 4px 10px;).
This padding is not used by IE8 to define the headers of the columns (that's why they look smaller than the columns underneath). Therefore we added a style (not styleClass) to our columns with following properties:

• width: 50px
  padding: 4px 10px;

By adding this style the header will be painted correctly in IE8. Final we added a fixed width to our table. Per columns we had a width of 70px + 30px for the scrollbar (In case you have 6 columns => 450px).

Hopefully this helps!

[cagatay.civici]

Can't replicate at;

http://www.primefaces.org/showcase-labs ... olling.jsf

In M3, there is a div inside column headers and cells, which has the padding now instead of column header/cells. So adding padding to column style might cause issues when you upgrade. This change was necessary to support resizing of a scrollable datatable to align. Scrollable table has a complex dom, header/content/footer are separate tables.

[Matrium]

thanks for your help timothy, this works great with ie8 and nearly with ff5 (still a few pixels off)
however, with ie7 (or ie8 with compat-mode) this messes up my page.
for now i will probably just forget about fixed headers and wrap a scrollpanel around my datatable. i want to use a max-height anyway so that my tables are smaller when there are only a view units, and it seems i can't do this with datatables-scrollable.