More than 1 row with h:selectmanyCheckbox

Question

I have a list of 16 items which should be shown like this

1 2 3 4
5 6 7 8
etc.

4 Items in a row and then it should add another row.

My problem is that your only allowed to show the info like

1 2 3 4 5 6 7 8 9 10 etc

or

1
2
3
4
etc.

My code looks like this:

<h:selectManyCheckbox value="#{main.selectedStates}">
  <f:selectItems value="#{main.stateOutput}" />
</h:selectManyCheckbox>

I have absolutely no idea how this should work. I spent now like 2 hours searching it on Google.

PS: Please don't blame me for my english :P

Answer 1

A non intrusive solution would be to use some JavaScript to modify the HTML DOM after the DOM tree has loaded. Something like, pseudo-code:

someSelectorForCheckboxDiv.forEach( if ... then ...set css or insert dom element );

The other way has been suggested by Luiggi and is probably closer to the JSF spirit.