Question

I am currently trying to iterate over a list which will generate a <div>(...)</div> for each value. These divs will be represented as ‘blocks’ (as shown in the image below). Problem is, I need them to align as in a row (so the new row starts at the lowest point of the previous).

This would be no problem when using a container div per row, like so:

<div>
    <div>(...)</div>
    <div>(...)</div>
    <div>(...)</div>
</div>
<div>
    <div>(...)</div>
    <div>(...)</div>
    <div>(...)</div>
</div>

Though I would prefer not to use container divs, as I would need to use certain logic inside my <ui:repeat>(...)</ui:repeat> to add </div><div> on every third entry.

I’m posting this under JSF too, because I’m hoping that JSF (or PrimeFaces or Tomahawk) has an appropriate solution. Though, if a simple CSS-trick would suffice, that would be perfect.

Hopefully you’ll be able to help me out with this one.

Note: a solution using tables won’t help me, as I would face the same issue using <tr>(...)</tr> as with my described container div above.

Answer 1

Is there a semantic reason to not use tables? This is easily possible with the combination <h:panelGrid> and <c:forEach>.

<h:panelGrid columns="3">
    <c:forEach items="#{bean.items}" var="item">
        <h:panelGroup>#{item}</h:panelGroup>
    </c:forEach>
</h:panelGrid>

It works that way because <c:forEach> runs during view build time and effectively generates physically multiple <h:panelGroup> components so that they properly end up each as a cell of the <h:panelGrid>. It wouldn’t have worked when using <ui:repeat>, because that runs during view render time only and effectively ends up as a single cell of the <h:panelGrid> during view build time.

If there’s a strong and valid semantic reason to not use tables, then you really can’t nicely go around a container <div> to represent a row.

<div>
    <ui:repeat value="#{bean.items}" var="item" varStatus="loop">
        <h:outputText value="&lt;/div&gt;&lt;div&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
        <div>#{item}</div>
    </ui:repeat>
</div>

See also:

• JSTL in JSF2 Facelets… makes sense?
• JSF 2 ui:repeat: group every n items inside a div