Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
RustyboyRustyboy 

Problems displaying radio buttons in VF page

Hi,

I am trying to display radio buttons within a pageBlockSection along with other fields and am having a few basic display problems:

1. The label does not display for the set of 3 radio buttons
3.  The tooltip does not display for each radio button (Title attribute)
2. The radio buttons are aligned far left - I want them to display in the first colum of the pageBlockSection

VFcode excerpt 
apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="3">

  <apex:actionRegion >
	<apex:pageBlockSectionItem >
		<apex:selectRadio id="itemTypeOptions" label="Type" value="{!selectedItemType}">
			<apex:actionSupport event="onchange" rerender="newItemDetails" />
			<apex:selectOption itemValue="Action" itemLabel="Action" title="This is an action" />
			<apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is a Decsion" />
			<apex:selectOption itemValue="Note" itemLabel="Note" title="This is a Note" />
           </apex:selectRadio>
     </apex:pageBlockSectionItem>
  </apex:actionRegion>
						
  <apex:pageBlockSectionItem />
  <apex:pageBlockSectionItem />

</apex:pageBlockSection>

Any ideas?


 
Best Answer chosen by Rustyboy
RustyboyRustyboy
Thanks Pavan,

I actually wanted the radio buttons to display in the first column of the pageBlockSection. I have achieved this by adding an outputLabel, which also solves the problem of the label. I have also decided that the title on the selectRadio should suffice as an overall tooltip for the set of radio buttons.
  
<apex:pageBlockSectionItem >
	<apex:outputLabel value="Type" />	
		<apex:actionRegion >
			<apex:selectRadio id="itemTypeOptions" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
			<apex:actionSupport event="onchange" rerender="newItemDetails" />
			<apex:selectOption itemValue="Action" itemLabel="Action" />
			<apex:selectOption itemValue="Decision" itemLabel="Decision" />
			<apex:selectOption itemValue="Note" itemLabel="Note" />
           	</apex:selectRadio>
	</apex:actionRegion>
</apex:pageBlockSectionItem>

 

All Answers

PavanKPavanK
Please refer below code for point 1 and 2
  
<apex:page standardController="Account" >
<apex:form >
<apex:pageblock >
<apex:pageBlockSection id="newItemDetails" collapsible="false" title="Add New Item" columns="2">
        <apex:selectRadio id="itemTypeOptions" label=" Type" value="{!Account.AccountSource}" layout="pageDirection" title="Action, Decision,Note">
            <apex:actionSupport event="onchange" rerender="newItemDetails" />
            <apex:selectOption itemValue="Action" itemLabel="Action" title="This is an action" />
            <apex:selectOption itemValue="Decision" itemLabel="Decision" title="This is a Decsion" />
            <apex:selectOption itemValue="Note" itemLabel="Note" title="This is a Note" />
           </apex:selectRadio>
  <apex:pageBlockSectionItem />
  <apex:pageBlockSectionItem />
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Label was not showing because of pagebloacksection

To show radiobutton in first column i have added property layout="PageDirection"
 
PavanKPavanK
For tooltip i will suggest to add gerneralize title tooltip on radio button.

Please select as best answer if answer helped you,
RustyboyRustyboy
Thanks Pavan,

I actually wanted the radio buttons to display in the first column of the pageBlockSection. I have achieved this by adding an outputLabel, which also solves the problem of the label. I have also decided that the title on the selectRadio should suffice as an overall tooltip for the set of radio buttons.
  
<apex:pageBlockSectionItem >
	<apex:outputLabel value="Type" />	
		<apex:actionRegion >
			<apex:selectRadio id="itemTypeOptions" value="{!selectedItemType}" layout="lineDirection" title="Select the type of item to add">
			<apex:actionSupport event="onchange" rerender="newItemDetails" />
			<apex:selectOption itemValue="Action" itemLabel="Action" />
			<apex:selectOption itemValue="Decision" itemLabel="Decision" />
			<apex:selectOption itemValue="Note" itemLabel="Note" />
           	</apex:selectRadio>
	</apex:actionRegion>
</apex:pageBlockSectionItem>

 
This was selected as the best answer
PavanKPavanK
I guess, instead of chosing best answer for me you selected wrong one.

Not a problem please let mek now, if i any information required.