Adding space between two radio buttons of h:selectOneRadio

Question

In JSF 2.0 I have below

<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
    <f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
    <f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>

I get output as

O Accepted  O Rejected
          ^^

What I want is add space between two radio button so that output would be

O Accepted           O Rejected
          ^^^^^^^^^^^

I tried adding   between two radio button however it is not working. I am getting radio button on next line.

<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
    <f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
    &nbsp;&nbsp;&nbsp;
    <f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>

Any idea how this can be done?

HTML generated without   is

<table id="radio26">
<tr>
<td>
<input type="radio" checked="checked" name="radio26" id="radio26:0" value="Accepted" onclick="validateMyRadioButton()" /><label for="radio26:0"> Accepted</label></td>
<td>
<input type="radio" name="radio26" id="radio26:1" value="Rejected" onclick="validateMyRadioButton()" /><label for="radio26:1"> Rejected</label></td>
</tr>
</table>

When I add &nbsp one space is generated before <table id="radio26"> statement.

Answer 1

Disclaimer, I don't know anything about JSF, so the following is based on my experience of ASP.NET and adding spaces in there. If this is wildly incorrect, please let me know, and I will remove immediately...

Try adding the space to the item label, updating...

<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>

To...

<f:selectItem itemValue="Accepted" itemLabel="Accepted &nbsp; &nbsp;" id="accepted"/>

It might need to be escaped itself into...

<f:selectItem itemValue="Accepted" itemLabel="Accepted &amp;nbsp; &amp;nbsp;" id="accepted"/>

UPDATE

As the OP says in the comments, this will extend the link.

Looks like you should be able to set a CSS class to the parent object with something like...

<h:selectOneRadio styleClass="myRadioCtrl" ... >

And then in your style / CSS have something like...

.myRadioCtrl span { padding-right: 10px; }

Answer 2

Just thought id share my answer... after inspecing the page with firebug i ended up with the following

JSF:

   <h:panelGroup id="search-options" layout="block" styleClass="radioButtonSpace">
        <h:selectOneRadio value="#{searchEngineController.reportSearch}">
        <f:selectItem itemValue="#{false}" itemLabel="CEPIS Search" />
        <f:selectItem itemValue="#{true}" itemLabel="Report Search" />
        </h:selectOneRadio>
    </h:panelGroup>

CSS:

.radioButtonSpace table tbody td {padding-right:50px;}

Answer 3

I was having difficulties with this. Applying Style did not work for me when I did it on h:selectOneRadio, however it worked when applied in panelgroup wrapping around it.

Answer 4

Nothing of these answers worked for me, but like this works perfectly:

.ui-selectoneradio label{ padding-right: 10px !important; }

This is in case using primefaces