PrimeFaces 3.0 - <p:dataTable> headers do not line up with using scrollable="true"

Question

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:

IE 7 screenshot

Firefox 4.0.1 screenshot:

Firefox 4.0.1 screenshot

Here is some of my Facelet page code:

<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-SNAPSHOT with the current Mojarra 2.1 JSF RI.

UPDATE

I have moved to the PrimeFaces 3.0-M2 (not snapshot) release and the problem still exists. Following the suggestions 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

IE 7 with XHTML 1.0 Strict

Firefox 4 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?

It almost looks like on Firefox 4 that the header offset difference is roughly equal to the width of the scrollbar. I notice you have a themeroller, does this header width change at all when you switch themes? — maple_shaft
I checked the Primefaces issues page code.google.com/p/primefaces/issues/list and didn't find this issue listed as a known bug. It looks like it might be an issue of setting fixed widths to a column, on a scrollable dataTable, on Firefox and earlier versions of IE. On a side note, THANK YOU for taking the time to write a clear and concise question. I am becoming demoralized by the number of terrible questions on this site. — maple_shaft
What happens when you remove the sortBy attribute of the column. Perhaps there are CSS styles in the sort button DOM elements that are getting in the way? — maple_shaft
Thanks for your comments Maple. I'm off for Canada Day so I'll take a look at this again on Monday at the office. — Jim Tough
I removed all the sortBy attributes in the columns of this table. It did not fix the problem. With the sorting out I can see that each column header is slightly too small, so with many columns the misalignment is quite large at the end. — Jim Tough

BalusC BalusC · Accepted Answer · 2011-07-01T14:27:37

This is clearly a CSS/JS issue. A scrollable table with fixed headers is impossible in plain HTML (if tbody { overflow: scroll; } were supported by all browsers...). A lot of different CSS/JS solutions(hacks) have been invented to achieve this. I don't have insight in PF 3 source and I don't know which hack it is using. But this definitely needs to be reported to the PF guys. The only thing which you can do is to check if you're using the proper HTML doctype (read: a strict doctype) so that at least MSIE doesn't run in quirks mode.

E.g. HTML5

<!DOCTYPE html>

or XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<f:view contentType="text/html">

or XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<f:view contentType="text/html">

or maybe XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view contentType="text/html">

PrimeFaces 3.0 - <p:dataTable> headers do not line up with using scrollable="true"

3 Answers