SelectRadio how to display radio buttons side by side

Question

I need to display Redio buttons side by side. like below

But they are displaying like

My VF code so far (I need to render some part of the page based on user selection of Income/Expense/Transfer):

<apex:page id="pageNewReservation"  docType="html-5.0"  standardController="Journal__c" extensions="tie" sidebar="false" showHeader="false" standardStylesheets="true" > 
<html>
    <apex:form id="theForm">
        <head>
            <style>
                *{
                }
                body{
                width:35rem;
                padding:0.2rem;
                }

                .radioOpt td, .radioOptinput, .radioOpt label{
                width: 90%; font-size : 20px;     
                display:inline-block; margin: 0 auto;   
                }   
                .radioOpt td:nth-child(1) { font-size:1rem; background-color: green; padding:.8rem 0 .8rem 0; color:white; border-radius:1.5rem; margin: 0 .5rem 0 .5rem; }
                .radioOpt td:nth-child(2) { font-size:1rem; background-color: blue; padding:.8rem 1rem .8rem 1rem; color:white; border-radius:1.5rem; margin: 0 .5rem 0 .5rem;  }
                .radioOpt td:nth-child(3) { font-size:1rem; background-color: red; padding:.8rem 1rem .8rem 1rem; color:white; border-radius:1.5rem; margin: 0 .5rem 0 .5rem;  }
            </style>
        </head>
        <body>
            <apex:pageBlock >
                <apex:actionRegion >
                    <apex:outputPanel > 
                        <table border="" class="WizardTable radioOpt" style="width:90%;" >     
                            <tr>
                                <td  style="width:90%;">
                                    <!--  <apex:selectList id="picklistToChangeVF" value="{!selectedRT}" size="1" multiselect="false" >

                                    <apex:selectRadio styleClass="radioOpt" value="{!selectedRT}" id="outMailshot_Frequency__c"> 
                                        <apex:selectOption itemValue="INCOME" itemLabel=" Income  " /> 
                                        <apex:selectOption itemValue="EXPENSE" itemLabel="Expense" /> 
                                        <apex:selectOption itemValue="TRANSFER" itemLabel="Transfer" />     
                                        <apex:actionSupport reRender="areaForList" event="onchange" action="{!onChangeSelectRadio}" />     
                                    </apex:selectRadio>
                                </td>                                                        
                            </tr>
                        </table> 
                    </apex:outputPanel>
                </apex:actionRegion>

            </apex:pageBlock> 
            <apex:pageBlock id="areaForList"> <!-------------- Area which will rerender based on user selection on JOURNAL TYPE -------------->

                <!--  -----------------------------------------------------  Income -------------------------------------- --- -->
                <apex:pageBlock title="Income"  rendered="{!pb1Rendered}" mode="maindetail">
                    <apex:outputPanel styleClass="blocksection3" layout="block">


                        <div style="width:28rem; background-color:#EBF5FB;">
                            <apex:pageBlockSection columns="1" >
                                <h3 style="color:blue; margin-bottom:0">Value</h3>
                                <apex:pageBlockSectionItem >  <apex:inputField value="{!Journal__c.Value__c}" style="width:27rem;background-color:#EBF5FB; border-color:#3498DB; margin-bottom:1.5rem;" /> </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </div>

                        <div>
                            <apex:pageBlockSection columns="1">
                                <h3 style="color:blue; margin-bottom:0">Date*</h3>
                                <apex:pageBlockSectionItem >  <apex:inputField value="{!Journal__c.Journal_Date__c}" style="border-radius:2rem; border-color:#D6EAF8;  " />   </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </div>

                        <apex:pageBlockSection columns="2">
                            <apex:pageBlockSection columns="1" >
                                Category  <br/>
                                <apex:pageBlockSectionItem >     <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="General_Ledge_Account__c" valueField="Id" targetField="{!Journal__c.General_Ledger_Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  /> </apex:pageBlockSectionItem>
                                Person   <br/>
                                <apex:pageBlockSectionItem >    <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="Account" valueField="Id" targetField="{!Journal__c.Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  /> </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                            <apex:pageBlockSection columns="1">
                                Account <br/>
                                <apex:pageBlockSectionItem > <apex:inputField value="{!Journal__c.General_Ledger_Account__c}" style="border-radius:1.5rem; margin-bottom:1rem;" /> </apex:pageBlockSectionItem>

                                <!--        <apex:pageBlockSectionItem>    <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="General_Ledge_Account__c" valueField="Id" targetField="{!Journal__c.General_Ledger_Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  />  </apex:pageBlockSectionItem><apex:pageBlockSectionItem > <apex:inputField value="{!Journal__c.Company__c}" style="border-radius:1.5rem; margin-bottom:1rem;" /> </apex:pageBlockSectionItem>
                                <apex:pageBlockSectionItem >     <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="Company__c" valueField="Id" targetField="{!Journal__c.Company__c}" style="width:10rem; margin:0; border-radius:1rem;"  />
                                </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </apex:pageBlockSection>
                    </apex:outputPanel>                        

                    <div style="background-color:gray; margin:1rem; padding: 1rem">
                        <apex:pageBlockSection columns="1">

                            <apex:pageblockTable value="{!objItem}" var="item" >
                                <apex:column headerValue="Item" > 
                                    <apex:inputField value="{!item.Product_Inv__c}" /> </apex:column>
                                <apex:column headerValue="Quantity" >
                                    <apex:inputField value="{!item.Quantity__c}" />  </apex:column>
                                <apex:column headerValue="Price/Unit" > 
                                    <apex:inputField value="{!item.Price__c }" /> </apex:column>
                                <apex:column headerValue="Total" > 
                                    <apex:inputField value="{!item.Price__c }" /> </apex:column>
                            </apex:pageblockTable>
                        </apex:pageBlockSection>
                    </div>
                </apex:pageBlock> <!-- end of income -->
                <!--  -----------------------------------------------------  Expense -------------------------------------- --- -->
                <apex:pageBlock title="Expense"  rendered="{!pb2Rendered}" mode="maindetail">
                    <apex:outputPanel styleClass="blocksection3" layout="block">


                        <div style="width:28rem; background-color:#EBF5FB;">
                            Expense text
                            <apex:pageBlockSection columns="1" >
                                <h3 style="color:blue; margin-bottom:0">Value</h3>
                                <apex:pageBlockSectionItem >  <apex:inputField value="{!Journal__c.Value__c}" style="width:27rem;background-color:#EBF5FB; border-color:#3498DB; margin-bottom:1.5rem;" /> </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </div>

                        <div>
                            <apex:pageBlockSection columns="1">
                                <h3 style="color:blue; margin-bottom:0">Date*</h3>
                                <apex:pageBlockSectionItem >  <apex:inputField value="{!Journal__c.Journal_Date__c}" style="border-radius:2rem; border-color:#D6EAF8;  " />   </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </div>

                        <apex:pageBlockSection columns="2">
                            <apex:pageBlockSection columns="1" >
                                Category  <br/>
                                <apex:pageBlockSectionItem >     <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="General_Ledge_Account__c" valueField="Id" targetField="{!Journal__c.General_Ledger_Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  /> </apex:pageBlockSectionItem>
                                Person   <br/>
                                <apex:pageBlockSectionItem >    <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="Account" valueField="Id" targetField="{!Journal__c.Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  /> </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                            <apex:pageBlockSection columns="1">
                                Account <br/>
                                <apex:pageBlockSectionItem > <apex:inputField value="{!Journal__c.General_Ledger_Account__c}" style="border-radius:1.5rem; margin-bottom:1rem;" /> </apex:pageBlockSectionItem>

                                <!--        <apex:pageBlockSectionItem>    <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="General_Ledge_Account__c" valueField="Id" targetField="{!Journal__c.General_Ledger_Account__c}" style="width:10rem; margin:0; border-radius:1rem;"  />  </apex:pageBlockSectionItem><apex:pageBlockSectionItem > <apex:inputField value="{!Journal__c.Company__c}" style="border-radius:1.5rem; margin-bottom:1rem;" /> </apex:pageBlockSectionItem>        <apex:pageBlockSectionItem >     <c:TypeAheadComponent2 allowClear="true" importJquery="true" labelField="Name" SObject="Company__c" valueField="Id" targetField="{!Journal__c.Company__c}" style="width:10rem; margin:0; border-radius:1rem;"  />
                                </apex:pageBlockSectionItem>
                            </apex:pageBlockSection>
                        </apex:pageBlockSection>
                    </apex:outputPanel>                        

                    <div style="background-color:gray; margin:1rem; padding: 1rem">
                        <apex:pageBlockSection columns="1">

                            <apex:pageblockTable value="{!objItem}" var="item" >
                                <apex:column headerValue="Item" > 
                                    <apex:inputField value="{!item.Product_Inv__c}" /> </apex:column>
                                <apex:column headerValue="Quantity" >
                                    <apex:inputField value="{!item.Quantity__c}" />  </apex:column>
                                <apex:column headerValue="Price/Unit" > 
                                    <apex:inputField value="{!item.Price__c }" /> </apex:column>
                                <apex:column headerValue="Total" > 
                                    <apex:inputField value="{!item.Price__c }" /> </apex:column>
                            </apex:pageblockTable>
                        </apex:pageBlockSection>
                    </div>
                </apex:pageBlock> <!-- Expense -->
                <!--  -----------------------------------------------------  Transfer -------------------------------------- --- -->
                <apex:pageBlock title="Transfer"  rendered="{!pb3Rendered}" mode="maindetail">
                    <apex:outputPanel styleClass="blocksection3" layout="block">
                        Transfer
                    </apex:outputPanel>
                </apex:pageBlock>

            </apex:pageBlock> <!-- Radio button --> 
            <apex:pageBlock>
                <apex:pageBlockSection >
                    <apex:pageBlockSection >
                        Note <br/> 
                        <apex:pageBlockSectionItem > <apex:inputField value="{!Journal__c.Journal_Description__c}" style="border-radius:1.5rem; margin-bottom:1rem;" /> </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
                    <apex:pageBlockSection >
                        Receipt Photo <br/>
                        <apex:pageBlockSectionItem >
                            <apex:inputFile fileName="{!attachment.name}" value="{!attachment.body}" id="file"/>
                        </apex:pageBlockSectionItem>
                    </apex:pageBlockSection>
                </apex:pageBlockSection>

                <apex:commandButton value="  Cancel  " action="{!cancel}" immediate="true" style=" border-radius:1rem;" />
                <apex:commandButton value="  Save  " action="{!save}" style="background-color: #3498DB; border-radius:1rem; float:right " />
            </apex:pageBlock>
        </body>
    </apex:form>
</html>

By removing CSS for radioOpt, the buttons are like this

Dan Jones · Accepted Answer · 2016-12-23 14:58:06Z

3

Presumably this is the part that matters:

<apex:selectRadio styleClass="radioOpt" value="{!selectedRT}" id="outMailshot_Frequency__c"> 
    <apex:selectOption itemValue="INCOME" itemLabel=" Income  " /> 
    <apex:selectOption itemValue="EXPENSE" itemLabel="Expense" /> 
    <apex:selectOption itemValue="TRANSFER" itemLabel="Transfer" />     
    <apex:actionSupport reRender="areaForList" event="onchange" action="{!onChangeSelectRadio}" />     
</apex:selectRadio>

<apex:selectRadio> takes a parameter layout which can either be:

lineDirection (horizontal)
pageDirection (vertical)

Check out more here, but you should get this effect by doing this:

<apex:selectRadio layout="lineDirection" styleClass="radioOpt" value="{!selectedRT}" id="outMailshot_Frequency__c">

Edit

Based on your comments, it'll be a CSS issue. You can either remove the CSS for radioOpt to see if you get the same problem, but I have noticed that in your .radioOpt td:nth-child(1) { class, the line:

padding:.8rem 0 .8rem 0;

Is not the same as the padding applied to the other two:

padding:.8rem 1rem .8rem 1rem;

edited Dec 23, 2016 at 14:58

answered Dec 23, 2016 at 13:04

Dan Jones

7,1474 gold badges36 silver badges62 bronze badges

I tried that, no luck.
– Tanmoy Das
Dec 23, 2016 at 14:31
Seems like 1st selectOption (Income in my case) is behaving like parent for 2nd, 3rd option.
– Tanmoy Das
Dec 23, 2016 at 14:33
@tanmoy See my edits.
– Dan Jones
Dec 23, 2016 at 14:58
I have tried your suggestions. Still, selectOption 2 & 3 are considered as child of selectOption1. Dont know why
– Tanmoy Das
Dec 23, 2016 at 17:39
If I withdraw CSS for radioOpt, radioButton are inline, but selectOption 2 & 3are considered as child of selectOption1. Dont know why. Padding has no visual impact.
– Tanmoy Das
Dec 23, 2016 at 17:41

| Show 1 more comment

Stack Exchange Network

SelectRadio how to display radio buttons side by side

1 Answer 1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
visualforce
radio-button
.

Hot Network Questions

SelectRadio how to display radio buttons side by side

1 Answer 1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged visualforceradio-button.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
visualforce
radio-button
.