Adding space between Radio button and Label in selectOneRadio in jsf [duplicate]

Question

This question already has answers here:

How do I override default PrimeFaces CSS with custom styles? (5 answers)

Closed 6 years ago.

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.

Answer 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

Answer 2

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