Display horizontally dynamic content in JSF

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!

mprabhat · Answer 1 · 2012-04-16T04:39:05.947

1

Instead of

<ice:panelGrid columns="1">

Try using

ice:panelGroup

Edit: As per comment

Almost similar problem being discussed

edited Apr 16 '12 at 04:39

answered Apr 16 '12 at 04:16

mprabhat

20,107
7
46
63

Already see that post, they could put all horizontally. But if a put this inside a panelGrid with columns="3" is not working. All the content is arranged horizontally and the atribute columns is ignored. – Fisu Apr 16 '12 at 04:42

score 1 · Accepted Answer · answered Apr 16 '12 at 13:23

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 :-)

Display horizontally dynamic content in JSF

2 Answers2