JSF2.0, Possibility to align Components in panelgrid

[Joerg Orlowski]

Hello,
i just try JSF2 and have a little Problem.
I want to make a box/table with this layout:

A1 A2
B1 B2
C1

I use grdipanels and my question ist how can i align a component (commandbutton) C1 horizontally??
I solved it with css positioning left:110px, but this is not very dynamic.

Any suggestions?

Thanks

Jörg Orlowski

[Tim Holloway]

Welcome to the JavaRanch, Joerg!

Actually, I think our editor repositioned your example. You'll have better luck if you do your "ASCII Art" using the editor's Code button.

CSS is supposed to handle layour details in JSF. There are a number of CSS options that can help, although some are sensitive to the browser, browser version, and DOCTYPE options of the page.

For a truly dynamic layout, I think you can use EL in the JSF tag's "style=" attribute and provide the necessary CSS information as computed in a backing bean, but normally such extreme measures aren't needed.

[ali esmaily]

you can use this code.

 <h:panelGrid columns="3" columnClasses="testCol1,testCol2,testCol3">
            <h:graphicImage value="#{cc.attrs.productShop.picUrl}" alt="#{cc.attrs.productShop.picTitle}" height="200" width="200" styleClass="myimage"/>
            <h:panelGrid columns="1" border="1" >
                <h:outputText value="#{cc.attrs.productShop.name}" />
            <h:outputText value="#{cc.attrs.productShop.price} ریال"/>
            <c:if test="#{!empty cc.attrs.productShop.shortDesc}">
                <h:outputText value="#{cc.attrs.productShop.shortDesc}"/>
            </c:if>
            </h:panelGrid>
            <h:panelGrid columns="1">
               
                <p:button value="detail" >
                    <f:param name="productShopID" value="#{cc.attrs.productShop.id}"/>
                </p:button>
                <p:commandButton value="buy Basket" action="#{cc.attrs.buyBasketMethod}">
                    <f:param name="productShopID" value="#{cc.attrs.productShop.id}"/>
                </p:commandButton>
                <p:commandButton value="compare Basket" action="#{cc.attrs.compareBasketMethod}">
                    <f:param name="productShopID" value="#{cc.attrs.productShop.id}"/>
                </p:commandButton>
                 <p:rating value="#{cc.attrs.productShop.starRate}" disabled="true"/>
            </h:panelGrid>

        </h:panelGrid>

.testCol1 { background-color: #3366ff;}
.testCol2{vertical-align: top; background-color: #66ff66;}
.testCol3{ background-color: #66ff66;}