+ Start a Discussion
TanDTanD 

selectRadio how to display radio inline

User-added image
The above is my expected output, but following is my current output
User-added image

MY vf code is below: 

<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>
-->               Group*  <br/>
                                    <!--                      <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>
-->               Group*  <br/>
                                    <!--                      <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>
</apex:page>