jquery - How to custom layout h:selectOneRadio

Question

the layout of h:selectOneRadio can either go horizontal or vertical, so is there a way that I can do some custom layout. For example, instead of displaying 8 radio button, display them in 2 rows with 4 on each row? Please provide your answer beside PrimeFaces p:selectOneRadio solution, it use CSS3 causing IE8 to display the radio button in rectangle shape.

Answer 1

It's not exactly that, but you could use Tomahawk's <t:selectOneRadio> with the layout attribute set to "spread" to have a markupless rendering of radio buttons. You can then use <t:radio> to place the individual radio buttons in the markup the way you want, such as in a <h:panelGrid columns="4">.

E.g.

<t:selectOneRadio id="foo" value="#{bean.selectedItem}" layout="spread">
    <f:selectItems value="#{bean.availableItems}" />
</t:selectOneRadio>

<h:panelGrid columns="4">
    <t:radio for="foo" index="0" />
    <t:radio for="foo" index="1" />
    <t:radio for="foo" index="2" />
    <t:radio for="foo" index="3" />

    <t:radio for="foo" index="4" />
    <t:radio for="foo" index="5" />
    <t:radio for="foo" index="6" />
    <t:radio for="foo" index="7" />
</h:panelGrid>

or even when the amount of radio buttons is unspecified

<h:panelGrid columns="4">
    <c:forEach items="#{bean.availableItems}" varStatus="loop">
        <t:radio for="foo" index="#{loop.index}" />
    </c:forEach>
</h:panelGrid>

(note that <ui:repeat> is not suitable as it runs during view render time and thus end up as a single column of <h:panelGrid>, you'd need to use plain HTML <table> instead)