Geek asks and answers

Adding a space between two h switches: selectOneRadio

In JSF 2.0, I'm 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 the output as

O Accepted  O Rejected
          ^^

I want to add a space between the two switches so that the output is

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

I tried adding &nbsp;between two switches, but it does not work. I get a radio button on the 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  , <table id="radio26">one space is created before the expression .

+5
source share
4 answers

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

, ...

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

...

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

...

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

UPDATE

OP , .

, CSS - ...

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

/CSS - ...

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

, ... firebug

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

. , h: selectOneRadio, , , .

-1

, :

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

, -

-2
source

More articles:


All Articles