0

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:

enter image description here

<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?

0

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:

enter image description here

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

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.