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

UI Components for JSF
User avatar
jim@jimtough.com
Posts: 142
Joined: 03 Jun 2011, 18:06
Location: Canada

08 Jul 2011, 14:38

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:

Image

Firefox 4.0.1 screenshot:

Image

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

Image

Firefox 4 with XHTML 1.0 Strict

Image

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.
PF 3.0,
Mojarra 2.1.4,
Tomcat 7.0.14,
Eclipse Indigo,
IE 7, Chrome

Image
http://stackoverflow.com/users/346112/jim-tough

Would rather be a Decepticon...

Timothy
Posts: 6
Joined: 13 Jul 2011, 10:00

13 Jul 2011, 10:36

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
Expert Member
Posts: 9342
Joined: 17 Jun 2010, 13:34
Location: Netherlands

13 Jul 2011, 11:41

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)
Ronald van Kuijk
______________________________
PrimeFaces 6.1, PrimeFaces plus 0.0.2 | JbossWildfly 10.1| Mojarra 2.2.13
Fedora 61, Firefox 'most recent'
Read the forum posting rules
Beginners: https://jsf.zeef.com/bauke.scholtz

Timothy
Posts: 6
Joined: 13 Jul 2011, 10:00

13 Jul 2011, 11:57

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...

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

13 Jul 2011, 12:08

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
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Timothy
Posts: 6
Joined: 13 Jul 2011, 10:00

13 Jul 2011, 13:16

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
Posts: 112
Joined: 16 May 2011, 08:27

15 Jul 2011, 08:53

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).
PrimeFaces (Elite) 4.0.13, Majorra 2.1.28, Tomcat 7.0.53
Testing with Firefox, Chrome and IE9+IE10
<3 Primefaces!!!

Timothy
Posts: 6
Joined: 13 Jul 2011, 10:00

15 Jul 2011, 09:10

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
Prime
Posts: 18082
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

15 Jul 2011, 09:18

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
Posts: 112
Joined: 16 May 2011, 08:27

15 Jul 2011, 09:37

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.
PrimeFaces (Elite) 4.0.13, Majorra 2.1.28, Tomcat 7.0.53
Testing with Firefox, Chrome and IE9+IE10
<3 Primefaces!!!

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Bing [Bot] and 11 guests