Wednesday, February 21, 2007

Aligning JSF Panel Grids

Found this at http://forum.java.sun.com/thread.jspa?threadID=736808&messageID=4233027 but the answer was a little mangled.

Suppose you want to put to tables of different sizes side-by-side in two columns of a containing table. This JSF you need is
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<style>
.alignTop {
vertical-align:top;
}
</style>

<f:view>
<h:panelGrid columns="2" columnClasses="alignTop, alignTop">
<h:panelGrid columns="3" >

<h:outputText value="1"/>
<h:outputText value="2"/>
<h:outputText value="3"/>
<h:outputText value="4"/>
<h:outputText value="5"/>
<h:outputText value="6"/>

</h:panelGrid>

<h:panelGrid columns="3">

<h:outputText value="1"/>
<h:outputText value="2"/>
<h:outputText value="3"/>
<h:outputText value="4"/>
<h:outputText value="5"/>
<h:outputText value="6"/>
<h:outputText value="7"/>
<h:outputText value="8"/>
<h:outputText value="9"/>

</h:panelGrid>

</h:panelGrid>
</f:view>

That is, note you need two "alignTop" strings separated by a comma for the value of the columnClasses attribute. If you have only one "alignTop" it will only apply to the first column. To see this, switch the two inner panel grids.

Probably there is a better way to do this.

7 comments:

Zhigang Qi said...

:),I got it by google...top post

Michele said...

thanks a lot guy, yu saved me a lot of time

Mjrz said...

I wish I had hit your blog sooner. Could have save a couple of hours. Thanks a lot friend.

Mjrz said...

I wish I had found your post sooner. Could have saved a couple of hours.

Thanks a lot friend.

Marlon Pierce said...

No problem. Get a blog and do the same to return the favor. You'll be surprised at how useful this is.

RobertMarkBram said...

Thank you - quite a help. :)

Also, I found this:

use the rowClass="vertTop"
and the in your css file
.vertTop {
vertical-align:top;
}

From: http://www.mail-archive.com/users@myfaces.apache.org/msg34099.html

A little less typing maybe. :)

Rob
:)

marjan said...

bravo majstore