function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

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

Radio Button tweaking

 

Hi, 

 

I have a radio button table in VF and I want to flip it to where it is lined up vertical. 

 

Here is the code: 

 

 

<apex:dataTable value="{!category.questions}" var="question" id="questionList" width="1000px" 
            rowClasses="odd,even" cellPadding="3px;" border="0">
                <apex:column >
                    <B><apex:outputText value="{!question.Assessment_Question_Template__r.Question_Text__c}" /></B>
                </apex:column>
                <apex:column colspan="4">
                    <apex:selectRadio style="width: 100%" border="0" id="radioTable" value="{!question.Value__c}" disabled="true">
                        <apex:selectOption itemValue="1" itemLabel="1" />
                        <apex:selectOption itemValue="2" itemLabel="2" />
                        <apex:selectOption itemValue="3" itemLabel="3" />
                        <apex:selectOption itemValue="4" itemLabel="4" />
                        <apex:selectOption itemValue="5" itemLabel="5" />
                        <apex:selectOption itemValue="6" itemLabel="6" />
                        <apex:selectOption itemValue="7" itemLabel="7" />
                    </apex:selectRadio>
                    <script>
                       var radioTable = document.getElementById("{!$Component.radioTable}");
                       var el = radioTable.getElementsByTagName("TD");
                       el[0].style.width = "175px";
                       el[0].align = "center";
                       el[1].style.width = "95px";
                       el[2].style.width = "95px";
                       el[3].style.width = "95px";
                       el[4].style.width = "95px";
                       el[5].style.width = "95px";
                    </script>
                </apex:column>
 
 
Ideallly, it would be <column> radio button <column> < text>   
                             <column> radio button < column> <blank> 
                             <column> radio button <column> < text> 
                             etc.  
 
 
Might be a silly question, but from what I've read about radio buttons is they can't be stacked like that.. is that true? 
 
Thanks in advance. 
T 
 
 
 


Best Answer chosen by Admin (Salesforce Developers) 
sfdcfoxsfdcfox
You can add the layout="pageDirection" attribute-value to have the radio items go down instead of across (the default mode). It would look something like this:
 
<apex:selectRadio value="{!mySelectedRadio}" layout="lineDirection">
   <apex:selectRadio itemValue="1" itemLabel="1" />
   <!-- other options -->
</apex:selectRadio>
 
 
 


All Answers
sfdcfoxsfdcfox
You can add the layout="pageDirection" attribute-value to have the radio items go down instead of across (the default mode). It would look something like this:
 
<apex:selectRadio value="{!mySelectedRadio}" layout="lineDirection">
   <apex:selectRadio itemValue="1" itemLabel="1" />
   <!-- other options -->
</apex:selectRadio>
 
 
 
This was selected as the best answer
timrnicholstimrnichols
 
It worked, I went as far as using CSS to try and align it... I should download the VF developer guide. ;) 


ShikibuShikibu
I have a multi-select picklist with 33 items. Our users are not at all fond of the standard multi-select user interface. I used this technique to convert it into a selectRadio, vertically oriented, but it is too long vertically. I'm wishing for a way to display the selectOptions in multiple columns.
 
Is that possible?  


deepu.sandeepdeepu.sandeep
can i get spaces between radio buttons in horizontal direction.
suggest me how to do dat.
 
Thanks in Advance.


unidhaunidha
<apex:selectRadio itemValue="1" itemLabel="1" />


 will return you the error. Use  

<apex:selectOption itemValue="1" itemLabel="1" />