[SalesForce] How to style radio button labels in VisualForce Page

I am having a lot of trouble styling the radio button labels in my page.

In the image below you can see that the style of the radio button labels is completely wrong – they should all be the same as the greeen circled section, which is defined as MainPanelFont:

<table border="" class="WizardTable" align="left" style="width:30%; border-collapse: separate; border-spacing: 1 1em;" >        
    <tr>
        <td>
            <div  class="MainPanelFont">
                Please select the frequency<br/> for the data request:    
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="left" style="width:33%; padding-right: 3px; padding-left: 2px;" colspan="2">
            <div class="Mandatory">
                <apex:selectRadio styleClass="MainPanelFont" layout="pageDirection" value="{!sObjectRFC.Frequency__c}" id="outMailshot_Frequency__c">
                    <apex:selectOptions value="{!FrequencyOptions}"/>    
                </apex:selectRadio>
            </div>  
        </td>                                                        
    </tr>
</table>

here is the way the style class MainPanelFont is defined:

*[class~="Grey"],
*[class~="MainPanelFont"],
a.MainPanelFont,
span.MainPanelFont,
.country-name,
.dial-code{
    color:#666c71; 
    font-family : Verdana, Geneva, sans-serif;
    font-size : 13px
}

so what do I need to do in my page to have the radio button labels styled the same as the other sections?

Best Answer

so I found the solution is to embrace the fact that a VF/Apex <selectRadio> tage creates a table with labels and <input type="radio" ... option buttons:

So I created a style in my page called radioOpt:

<style>        
    .radioOpt td, .radioOptinput, .radioOpt label{
    color:#666c71; 
    font-family : Verdana, Geneva, sans-serif;
    font-size : 13px   
    }     
</style>

and applied it to the VF selectRadio table as below:

<table border="" class="WizardTable radioOpt" align="left" style="width:30%; border-collapse: separate; border-spacing: 1 1em;" >        
    <tr>
        <td>
            <div  class="MainPanelFont">
                Please select the frequency<br/> for the data request:    
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" align="left" style="width:33%; padding-right: 3px; padding-left: 2px;" colspan="2">
            <div class="Mandatory">
                <apex:selectRadio styleClass="radioOpt" layout="pageDirection" value="{!sObjectRFC.Frequency__c}" id="outMailshot_Frequency__c">
                    <apex:selectOptions value="{!FrequencyOptions}"/>    
                </apex:selectRadio>
            </div>  
        </td>                                                        
    </tr>
</table>

this now renders the radio button labels with the correct formatting as below:

But it's a shame that we need to jump through hoops like this, and that when rendering the HTML VF doesn't inherit the formatting of the containing object

Related Solutions

[SalesForce] Selected state of Radio Button In Visualforce Page

Here is a simple construction that mirrors what you are trying to do

<apex:page standardcontroller="Foo__c" >
<apex:selectRadio value="{!Foo__c.RadioOptionVal__c}">
  <apex:selectOption itemLabel="Value 1" itemValue="1"/>
  <apex:selectOption itemLabel="Value 2" itemValue="2"/>
  <apex:selectOption itemLabel="Value 3" itemValue="3"/>
</apex:selectRadio>
</apex:page>

where Foo__c.radioOptionVal__c is a picklist with values '1', '2', '3'

If I invoke the page using /apex/foo?id=someFooId ..
VF will fetch the current value of radioOptionVal__c from the database ...
If that value is a string of either '1', '2', or '3', then the proper radio button is defaulted. If the value in the database is null or something other than '1', '2', or '3', then no radio button is defaulted

[SalesForce] How to disable a radio button on visualforce page

You can use apex:actionsupport to do this the SF Way:

A simple VF Page:

<apex:page controller="TestController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:selectRadio label="Should the next question be disabled?" value="{!disabled}">
                    <apex:selectOptions value="{!yesNo}"/>
                    <apex:actionSupport event="onclick" status="stat" action="{!test}" reRender="test"/>
                </apex:selectRadio>
                <apex:outputPanel id="test">
                    <apex:selectRadio value="{!country}" disabled="{!isDisabled}">
                        <apex:selectOptions value="{!items}"/>
                    </apex:selectRadio>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
     </apex:form>
</apex:page>

And the controller:

public with sharing class TestController {
    public String country{get; set;}
    public String city{get; set;}
    public String disabled{get; set;}

    public Boolean getIsDisabled() {
        return 'Y'.equals(disabled);
    }
    public PageReference test() {
        return null;
    }

    public List<SelectOption> getYesNo() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('Y','Yes')); 
        options.add(new SelectOption('N','No')); 
        return options; 
    }

    public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('US','US')); 
        options.add(new SelectOption('CANADA','Canada')); 
        options.add(new SelectOption('MEXICO','Mexico')); return options; 
    }
}

Best Answer

Related Solutions

[SalesForce] Selected state of Radio Button In Visualforce Page

[SalesForce] How to disable a radio button on visualforce page

Related Topic