Need to arrange af:selectManyCheckbox in three columns - oracle-adf

Question

I have a list of items (16 in number) for which I need to provide Check boxes.
I've used af:selectManyCheckbox to render them. The challenge is to render these 16 items in 3 columns. Tried by placing the af:selectManyCheckbox in h:panelGrid with "columns=3" but it didn't work. I'm just able to get the list in one single column.
<h:panelGrid cellpadding="0" cellspacing="0" columns="2"
id="pg2" width="100%">
<af:selectManyCheckbox id="smc1" label="Languages">
<af:forEach items="#{pageFlowScope.listingCreateBean.languageList}"
var="language">
<f:selectItem itemValue="#{language.value}"
itemLabel="#{language.label}" id="si1"/>
</af:forEach>
</af:selectManyCheckbox>
</h:panelGrid>
Help is appreciated.

Answer 1

Try using the <af:panelFormLayout> component and set the columns to 3 and rows to 6.

Answer 2

Throw away af:selectManyCheckbox.
Only one sure way to achive your goal is to use af:iterator or af:forEach with af:selectBooleanCheckbox and any layout components combination to get desired layout.
And avoid using non-adf components (like h:panelGrid), it can cause a lot of trouble with pprs and so on.

Answer 3

Try this
<style type="text/css">
.checkbox-grid {
width: 100%;
}
.checkbox-grid .x2f{
width: 100%;
}
.checkbox-grid div {
display: block;
float: left;
/* 25% 4columns, 33% 3columns, 50% 2columns */
width: 25%;
}
</style>
<af:selectManyCheckbox value="#{listaFormatos}" styleClass="checkbox-grid">
<af:forEach var="item" items="#{posiblesListaFormatos}" >
<f:selectItem itemLabel="#{item.value}" itemValue="#{item.value}" id="si2"/>
</af:forEach>
</af:selectManyCheckbox>