0

I need to display Redio buttons side by side. like below enter image description here

But they are displaying like enter image description here

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 enter image description here

1 Answer 1

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;
6
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.