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.

  • Have you tried something like this : <apex:selectOption itemValue="{!$Label.RestrictionTypeAttribute}" itemLabel="{!$Label.RestrictionTypeAttributeLabel1}<br/>{!$Label.RestrictionTypeAttributeLabel2}"/> ? – Boris Bachovski Aug 16 '13 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 '13 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>"/> – Boris Bachovski Aug 17 '13 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 '13 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 – Boris Bachovski Aug 19 '13 at 23:30
4

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>
  • 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 '16 at 14:17

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.