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.
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.