Question

Looks simple but I can’t do it.
I need to display a series of images, 3 in each line. For example, if I have 9 elements in my collection it should display 9 images in a 3 x 3 table.
I’m trying with this code:

     <h:form>
        <ice:panelGrid columns="3">
            <ui:repeat var="user" value="#{indexBean.users}" >
                <ice:panelGrid columns="1">
                    <ice:graphicImage value="#{user.picture}"/>
                    <ice:outputText value="#{user.name}"/>
                </ice:panelGrid>
            </ui:repeat>
        </ice:panelGrid>
    </h:form>

But instead of a 3 columns ordered table I get one picture under the other.
I can get all items horizontally arranged with css: display:inline but the line isn’t cut from 3 to 3 elements. I get a “infinite” line with all elements.

Some help please? Thanks!

Answer 1

I found a solution. Use a DIV as container of the data generated trougth ui:repeat. Here is the example:

.panel_users {
    width:600px;
    height:400px;
    background-color:lightskyblue;
    margin:10px;
    overflow: auto;
    float:left;
}

 <h:form>
    <div class="panel_users">
        <ui:repeat var="user" value="#{indexBean.users}" >
            <ice:panelGrid columns="1" style="float: left;">
                <ice:graphicImage value="#{user.picture}"/>
                <ice:outputText value="#{user.name}"/>
            </ice:panelGrid>
        </ui:repeat>
    </div>
</h:form>

Is important style="float: left;" in the panelGrid to make them aline horizontally.
Sorry for my english 🙂