2

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.

6
  • Have you tried something like this : <apex:selectOption itemValue="{!$Label.RestrictionTypeAttribute}" itemLabel="{!$Label.RestrictionTypeAttributeLabel1}<br/>{!$Label.RestrictionTypeAttributeLabel2}"/> ? Aug 16, 2013 at 13:58
  • Yes, as above I found that the <br/> works if I have itemEscaped = "false" but have not been able to add css to the first label and not the second.
    – George S.
    Aug 16, 2013 at 14:00
  • You can wrap them in a <div> and apply inline css. Ex : <apex:selectOption itemValue="{!$Label.RestrictionTypeAttribute}" itemLabel="<div style="font-weight: bold;">{!$Label.RestrictionTypeAttributeLabel1}</div><br/><div style="font-size: 14px;">{!$Label.RestrictionType‌​AttributeLabel2}</div>"/> Aug 17, 2013 at 0:25
  • It doesn't compile I'm afraid: "The value of attribute "itemLabel" associated with an element type "apex:selectOption" must not contains the '<' character."
    – George S.
    Aug 19, 2013 at 13:27
  • 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>. Hope this helps Aug 19, 2013 at 23:30

1 Answer 1

5

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>
1
  • I am trying to do as your suggest, however this error occurs: The value of attribute "itemLabel" associated with an element type "apex:selectOption" must not contain the '<' character.
    – efirat
    Dec 7, 2016 at 14:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .