PanelGroupLayout line wrapping and af:iterator

Question

Hello.
I have a collection of elements and I would like to form a layout where those elements would be horizontal in a line while they fit allowed space or wrap to another line.
The collection elements are displayed with af:iterator.
I thought a panelGroupLayout would do exactly what I need but instead the elements have vertical layout (each on a separate line).
Could someone advice me please?
Here's exactly what I need in an ADF Tag Guide: http://jdevadf.oracle.com/adf-richclient-demo/faces/components/index.jspx#%2Fcomponents%2FpanelGroupLayout.jspx
Here's an illustration: http://img834.imageshack.us/img834/3551/wrapb.png
JDev 11R2
panelStretchLayout
<f:facet name="top">
            <af:panelGroupLayout id="pgl1" layout="vertical"> <!-- outer container -->
                <af:outputLabel value="Available" id="ol1" styleClass="header"/>
                <af:panelGroupLayout id="pgl3"> <!-- default layout -->
                    <af:iterator id="i1" value="#{bindings.InformationMetatermsKisView1.collectionModel}"
                                 var="row" rows="-1"> <!-- collection -->
                        <af:panelGroupLayout id="pgl2" layout="horizontal" inlineStyle="border, background..." > <!-- collection element -->
                           golink and commandLink
                        </af:panelGroupLayout>
                    </af:iterator>
                </af:panelGroupLayout>
                <f:facet name="separator">
                    <af:spacer width="10" height="10" id="s1"/>
                </f:facet>
                <af:spacer width="10" height="10" id="s3"/>
            </af:panelGroupLayout>
        </f:facet>Edited by: ILya Cyclone on Apr 4, 2013 4:31 PM

Answer 1

Seems like I could archieve what I wanted with CSS: default panelGroupLayout and inlineStyle or the elements = float: left; white-space: nowrap; .
Even though everything seem to work and look good, I'm a bit nervous as it is in the end not the greatest idea to mess with ADF layout managers with pure CSS.
Would there be some ADF-style solution?
Take a look at what I have:
<af:panelGroupLayout id="pgl3">
                            <f:facet name="separator">
                                <af:spacer width="10" height="10" id="s7"/>
                            </f:facet>
                            <af:iterator id="i2" value="#{bindings.InformationMetatermsKisView1.collectionModel}"
                                         var="row" rows="-1">
                                <af:panelGroupLayout id="pgl24" layout="horizontal"
                                         inlineStyle="float: left; white-space:nowrap; border: 1px #9dacc9 solid; border-radius: 5px; padding: 3px; background-color: #dde7f1; margin: 2px;">
                                         collection element
                                    <f:facet name="separator">
                                        <af:spacer width="8" height="8" id="s8"/>
                                    </f:facet>
                                </af:panelGroupLayout>
                            </af:iterator>
                        </af:panelGroupLayout>