Sign Up ›

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

Adding space between two radio buttons

Hi,

 

I need to add space/tab space between two radio buttons. I am passing the values for radio button through controller using <apex:selectOptions>. Please help to resolve this

 

 

Thanks & Regards,

Chiranjeevi T G

Puja_mfsiPuja_mfsi

Hi,

Please use the following code in your VF

 

<apex:selectRadio value="{!selectedVal}" layout="pageDirection">
           <apex:selectoptions value="{!RadioButton}"></apex:selectoptions>
</apex:selectRadio>

 

Use the layout="pageDirection" in your selectRadio component .

Layout :     The method by which radio buttons should be displayed in the table. Possible values include "lineDirection", in which radio buttons are placed horizontally, or "pageDirection", in which radio buttons are placed vertically. If not specified, this value defaults to "lineDirection".

 

 

Please let me know if u have any problem on same and if this post helps u please throw KUDOS by click on star at left.
chiranjeevitgchiranjeevitg

 already tried this, but this was not helpful for me, I want to dispaly the two radiobuttons with more space. For Ex: if we pageBlocksection with two columns. It will have more space between two components, like that I want to display in vf page.
kiranmutturukiranmutturu
May be with selectoptions you cant acheive y can't you simply try like this..you can add space how much you reqiore in this case
<apex:page controller="sampleCon">
<apex:form >
Computers: <apex:selectRadio value="{!country}" >
<apex:selectOptions value="{!items}"/>
</apex:selectRadio><p/>

</apex:form>
<!--- other way -->
<apex:repeat value="{!items}" var="a">
<input type="radio"/>{!a.Label}

</apex:repeat>

</apex:page>

you need to write the logic to send the selected one....
chiranjeevitgchiranjeevitg
I tried in this aspect also and I tried in placing the radiobuttons inside the Table too. But still no change.
manjirimanjiri
Folllowing code might help you.

<style>
    input[type=radio] { margin-left: 100px;}
    .radioClass { margin-left: -100px;}
</style>

<apex:selectRadio id="idRadio" value="{!selectedAddType}" onChange="displayInventory(this.value)" layout="table" styleClass="radioClass">
                        <apex:selectOption itemValue="Val1" itemLabel="Val1"/>
                        <apex:selectOption itemValue="Val2" itemLabel="Val2"/>
                        <apex:selectOption itemValue="Val3" itemLabel="Val3"/>
</apex:selectRadio>