12/14/2010

ICEFaces and scrollable tables ... especially in Liferay

Problem : If you add the attribute  scrollable="true" to an ICEFaces dataTable, ICEFaces can´t align the header width and the width of the columns.That´s because ICEFaces renders the header and the columns as individual tables and somehow mixes up the widths.

Solution 1:

The first thing you could do is to use fixed wisth: Give the table and the columns the concrete width (in pixels) -the table should have the width of all columns added together. Sadly it is not possible to use procentual values (see tag description).

Solution 2 (Non - Internet Explorer): This works when your table is always rendered at the same size. But what do you do in Portlets, especially in Liferay ? Portlets tend to change their sizes ... fixed widths don´t work here very well.
Style the table to use 100 % of the surrounding container. Then make the table columns veeeery long - longer than the biggest screen size you could expect.  The combination of 100 % and the big pixel values leads in firefox and chrome to the table taking 100 % of the container, but not more. And the table headers are scaled correctly. I am still looking for a way to determine a portlets width ...

Example
<ice:dataTable id="selectedDocuments"
style="width:100%;border-width:0px" columnWidths="900px, 900px;"
value="#{bean.werte}" var="wert"  scrollable="true" resizable="false">

<ice:column style="width: 900px;">
<f:facet name="header">
<ice:outputText value="Title" />
</f:facet>
<ice:outputText value="text" />
</ice:column>
<ice:column style="width: 900px;">
<f:facet name="header">
<ice:outputText value="Titel" />
</f:facet>
<ice:outputText value="text2" />
</ice:column>
</ice:dataTable>



Hint

Of course this is not working for IE6 & IE8 ...


If you liked this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.