jsfjsf-2whitespaceselectoneradio

Adding space between two radio buttons of h:selectOneRadio


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 &nbsp; 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 &nbsp; 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.


Solution

  • 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; }