[SalesForce] Multiple line itemLabel in apex:selectOption

I have a situation that should be pretty easy, but I can't seem to make it work.

<apex:selectRadio id="restrictRadioBtns" layout="pageDirection" value="{!restrictedObjSettings.Restriction_Type__c}" >
                 <apex:selectOption itemValue="{!$Label.RestrictionTypeNone}" itemLabel="{!$Label.RestrictionTypeNoneLabel}"/>
                 <apex:selectOption itemValue="{!$Label.RestrictionTypeAttribute}" itemLabel="{!$Label.RestrictionTypeAttributeLabel1}"/>
                 <apex:outputText value="{!$Label.RestrictionTypeAttributeLabel2}"/>
                 <apex:selectOption itemValue="{!$Label.RestrictionTypeList}" itemLabel="{!$Label.RestrictionTypeListLabel1}"/>
                 <apex:outputText value="{!$Label.RestrictionTypeListLabel2}"/>
            </apex:selectRadio>

I have three radio buttons, all with labels.
For the second and third radio buttons, I want to have two labels, a "header" in bold and 1.2em, and a paragraph of text below in non-bold and normal size. Kind of like this:

enter image description here

I try to do this with outputTexts (above), but the outputTexts just end up above the selectRadio.

I tried the attribute itemEscaped = "false", which means I can add and
to the itemLabel value, but if I add a div it doesn't seem to compile, plus it seems kind of ugly to do it this way.

Any tips? I would rather use apex tags than raw HTML if possible.

Best Answer

I noticed that you can wrap the first instance of the expression in standard HTML tags but you can't apply any inline css nor add any other properties. So I've come up with something like this:

<apex:selectOption itemValue="" itemLabel="<h3>{!$Label.RestrictionTypeAttributeLabel1}</h3><br/><div style='font-size: 14px; padding-left: 25px; font-weight: bold;'>Secondary label</div>" itemEscaped="false" />

and then I applied the css for the first label by adding global rules on the page :

<style>h3 { color: red; font-size: 10px; }</style>

Related Solutions

[SalesForce] get set to apex:selectOption

Couple of things you could try: 1) Make sure the value in your controller matches exactly the value in your picklist. You have two spaces between the time and AM/PM

2) The colon (:) might be messing up the value in Visualforce. To get around this, I would do one of two things.. if this VF page is using a standard controller, why not create a picklist on the field with those times and render it in visualforce with If that's not the case, then think about generating those values in the controller as Select Options instead, as seen here: http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_selectOptions.htm

Apex:SelectOption does not show selected value on page reload

When you say "relaod page" I'm assuming you mean when the page refreshes due to action method updateSelectedTemplate (the return null). Normally, one simply makes the action method void if you are not causing a new Page to be displayed (wizard-style or redirect)

I would suggest you make the selectOptions a lazyload and move the docusign call into the lazyload rather than when the controller is instantiated. This helps avoid the indeterminate ordering of getters

public List <SelectOption> filteredTemplates {
    get {
      if (filteredTemplates == null) {
         DocusignRESTUtility dru = new DocuSignRESTUtility();
         String templatesJSON = 
            dru.getDocusignData(DocuSignRESTUtility.TEMPLATES);
         DocusignTemplateListBean templateData = (DocusignTemplateListBean) System.JSON.deserialize(templatesJSON, DocusignTemplateListBean.class);

         filteredTemplates = new List<SelectOption>();
         filteredTemplates.add(new SelectOption('','--No Template--'));
         for(EnvelopeTemplateBean envelopeTemplate : envelopeTemplates) {
            if(envelopeTemplate.name != '')
                filteredTemplates.add(new SelectOption(envelopeTemplate.templateId, envelopeTemplate.name));
       }
       return filteredTemplates;
    } private set;
}

I would also make for convention (only variables that the VF page references directly should be public:

private String selectedTemplate;

and for clarity and consistency

public String getSelectedTemplate() {
    return this.selectedTemplate;
}

Related Topic