JSF/XHTML/CSS 'tableview' of divs

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

enter image description here

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.

Is there a semantic reason to not use tables? This is easily possible with the combination `` and ``. Otherwise you really can't nicely go around a container div to represent a row. — BalusC, Nov 13 '12 at 23:16
Unbelievable how easy this was and that I completely forgot about ``. This was indeed the tag I've been searching for. I would accept this as the answer if not posted as a comment. — Menno, Nov 14 '12 at 10:15

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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>

JSF/XHTML/CSS 'tableview' of divs

1 Answers1

See also: