Adding space between Radio button and Label in selectOneRadio in jsf

Question

can any one advice on adding a space between a radio button and its label.

do we have any attributes in f:selectItem for doing this

I have to align the radios to the other components of the page. My Labels are aligned but to align the radio, I need to put some space between it and the labels.

I am unable to find any attribute to help me in this.

Please help.

You already gave the answer yourself in the tags: use CSS. Just put `padding: 10px` on the label or so. The only attribute you need to know about is `styleClass`. — BalusC, Feb 18 '14 at 12:40

score 1 · Accepted Answer · answered Jan 25 '16 at 21:34

1

Here is how I recently did this, using primefaces:

<p:column headerText="Is your hair naturally blonde?" width="140">
        <p:selectOneRadio value="#{mybean.haircolor}" id="haircolor" layout="custom">
            <f:selectItem itemValue="true" />
            <f:selectItem itemValue="false" />
        </p:selectOneRadio>

        <p:panelGrid columns="2">
            <h:panelGroup>
            <p:radioButton id="hairColorYes" for="haircolor" itemIndex="0"/>
             <h:outputLabel for="hairColorYes" value="Yes" styleClass="radiolabelPF"/>
            </h:panelGroup>
            <h:panelGroup>
            <p:radioButton id="hairColorNo" for="haircolor" itemIndex="1"/>
            <h:outputLabel for="hairColorNo" value="No" styleClass="radiolabelPF"/>
            </h:panelGroup>  
         </p:panelGrid>
 </p:column>

and then my one CSS style:

.radiolabelPF {
  margin-left: 5px;  
}

The trick was to use layout="custom" in <p:selectOneRadio>. My actual radio buttons and labels are within the <h:panelGroup> tags.

This was the only way I could control the space between the radio label and button in Primefaces. It's also documented in the "custom layout" section of the documentation on selectOneRadio.

http://www.primefaces.org/showcase/ui/input/oneRadio.xhtml

answered Jan 25 '16 at 21:34

nettie

628
1
11
23

Uh, you can just override default radio button layout using CSS? No need for a custom radio button layout. – BalusC Jan 26 '16 at 08:17
I tried that but got nowhere, i.e setting the margin for `input[type="radio"]` in my css. After several hours the custom layout was the only way that worked. – nettie Jan 26 '16 at 14:19
Just do `.ui-selectoneradio label { margin-left: 5px; }` ? See also generated HTML output in browser's F12 – BalusC Jan 26 '16 at 14:21
` ` with `.ui-selectoneradio label { margin-left: 5px; }` didn't work. – nettie Jan 26 '16 at 14:24
Then you've a localized problem (you've other custom styles) or are using an older PF version for which different CSS selector may be needed. At least, this all is definitely unnecessary. – BalusC Jan 26 '16 at 14:25
I'm using PF 5.3. – nettie Apr 25 '17 at 19:21

score -1 · Answer 2 · answered Feb 18 '14 at 13:28

-1

Please use CSS styles for this task - please see this tutorial for examples

answered Feb 18 '14 at 13:28

Zilvinas

5,518
3
26
26

Adding space between Radio button and Label in selectOneRadio in jsf

2 Answers2