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.

freefaller · Accepted Answer · 2012-07-16T11:45:44.567

5

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

edited Jul 16 '12 at 11:45

answered Jul 16 '12 at 11:03

freefaller

19,368
7
57
87

`Accepted ` working, but it makes white space as link for Accepted which is bad :( – Fahim Parkar Jul 16 '12 at 11:19
@Fahim, is it possible (as I say, I know nothing about JSF) to have something like `itemLabelStyle="padding-right:20px;"` or something like that? – freefaller Jul 16 '12 at 11:40
@Fahim, or can you set a `class` to the `selectOneRadio` and format it that way? – freefaller Jul 16 '12 at 11:42
The exact styling is- – satya prakash Panigrahi Feb 17 '22 at 07:13

score 3 · Answer 2 · answered Nov 07 '12 at 14:59

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

This works well. I used class="radiobuttonSpace" in a surrounding div and it did the trick. If you want to keep the buttons and labels together you can do: .radioButtonSpace table tbody td:nth-child(even) {padding-right:10px;} — nettie, Jun 28 '17 at 15:30

score -1 · Answer 3 · answered Dec 23 '16 at 20:23

-1

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.

answered Dec 23 '16 at 20:23

wahid

1
2

Show code please since wrapping a panelgroup around the selectoneradio won't help the individual radiobuttons. And wrapping it around each of them is impossible – Kukeltje Dec 24 '16 at 09:54

score -2 · Answer 4 · answered Jan 06 '16 at 23:40

-2

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

answered Jan 06 '16 at 23:40

crvazquez

7
3

1

Question was about h:selectOneRadio. – BalusC Jan 07 '16 at 08:33

Adding space between two radio buttons of h:selectOneRadio

4 Answers4