You need to sign in to do that
Don't have an account?
TanD
selectRadio how to display radio inline
The above is my expected output, but following is my current output
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>