Menu
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:
<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
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?
415
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">
The issue is being discussed here on the PrimeFaces support forum.
As of today (July 20th, 2011) the problem can now be seen in the Labs Showcase hosted by PrimeFaces when using Internet Explorer 7.0 to view it:
EDIT: Fixed as of today's PrimeFaces 3.0-M3-SNAPSHOT nightly build (July 22 2011).
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
