JSF radio buttons custom label and take out table layout

Question

I'm not a JSF pro, I do the layout HTML/CSS/JS. But I'm facing a problem with my Java developper for a form, in particular radio buttons. Here is layout that we want at the end: enter image description here

As you can see, almost everything is custom, the radio buttons, the input select boxes...

Now the main problems we are facing is that the JSF framework automatically outputs all this stuff in a table (which I as a designer don't like in the first place). Then we also need a very custom label for radio buttons.

I tried a bunch of different things, but I'll give you a basic example of the code here:

    <h:selectOneRadio value="#{user.favColor1}">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
    </h:selectOneRadio>

Is there another way of doing this? Are we doing it wrong? Do you know how I could do something like this?

Thanks!

Related: http://stackoverflow.com/questions/7435039/jsf-2-0-hselectoneradio-renders-table-element/7435111#7435111 — BalusC, Apr 16 '12 at 11:50
Does the above syntax work? I tried putting some content inside a `` but it gets rendered outside the table that is generated for the radio group? — Louise, Aug 22 '12 at 12:34
No it doesn't, ended up creating a custom component based on Prime Faces and kept the dropdowns outside the label. — denislexic, Aug 28 '12 at 07:02

score 4 · Answer 1 · edited Aug 05 '15 at 21:18

PrimeFaces got the exact component you are looking for

Take a look SelectOneRadio - Custom Layout

<h3>Custom Layout</h3>
<p:outputPanel id="customPanel" style="margin-bottom:10px">
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom">
        <f:selectItem itemLabel="Red" itemValue="Red" />
        <f:selectItem itemLabel="Green" itemValue="Green" />
        <f:selectItem itemLabel="Blue" itemValue="Blue" />
    </p:selectOneRadio>

    <h:panelGrid columns="3" cellpadding="5">
        <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
        <h:outputLabel for="opt1" value="Red" />
        <p:spinner />

        <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
        <h:outputLabel for="opt2" value="Green" />
        <p:inputText />

        <p:radioButton id="opt3" for="customRadio" itemIndex="2" />
        <h:outputLabel for="opt3" value="Blue" />
        <p:calendar />
    </h:panelGrid>
</p:outputPanel>

Their example even looks like your (Spinner next to Radio)

score -2 · Answer 2 · answered Apr 16 '12 at 05:30

In JSF you can style a radiogroup like this:

.myRadioGroup input {
  float: left;
  margin-left: -13px;
  margin-top: 3px;
}

.myRadioGroup label {
  margin-left: 12px;
  display: block;
}

<h:selectOneRadio value="#{user.favColor1}" styleClass="myRadioGroup">
        <f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
        <f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
        <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem>
</h:selectOneRadio>

JSF radio buttons custom label and take out table layout

2 Answers2