Tag Archives: selectRadio

Aligning labels with selectRadio within a pageBlockSection

Here was the issue:

I had a pageBlockSection with a mix of VF components bound to SObject fields and components bound to controller properties. In the latter case, I was using selectRadio.

The label on the selectRadio did not vertically align with the top radio button. You can see an aligned and misaligned example in the picture below.
Aligning label and selectRadio
Here is the VF markup for the aligned and misaligned example:
Solution: Use style="margin-top: -10px;".

<apex:pageBlockSection title="New Quote Wizard Parameters" columns="1" collapsible="false" id="quoteWizParams">
				
	<apex:selectRadio label="Type" value="{!quoteWiz.selectedQuoteWizType}" 
                          layout="pageDirection" id="quoteWizTypeRadios" 
                          style="margin-top: -10px;">
  		<apex:selectOptions value="{!quoteWiz.quoteWizTypeOptionList}"/>
        </apex:selectRadio>
				
	<apex:pageBlockSectionItem >
		<apex:outputText value="Service term (in months)"/>
		<apex:inputText value="{!quoteWiz.initServiceTermMos}"/>
	</apex:pageBlockSectionItem>
							
	<apex:selectRadio label="SnS Level" value="{!quoteWiz.selectedSnsLevel}" 
                          layout="pageDirection" id="snsLevelRadios">
	        <apex:selectOptions value="{!quoteWiz.snsLevelOptionList}"/>
	</apex:selectRadio>
</apex:pageBlockSection>

Side note: The use of the VF attribute label avoids the need for pageBlockSectionItem markup – SFDC automatically puts the label into the proper cell as if you were using apex:outputLabel.