1 Reply Latest reply on May 22, 2011 1:54 AM by Peter Blazejewicz

    Flex 4.5 mobile - inline CSS in htmlText

    Gregory Lafrance Level 6

      I want to change one word of text to bold and change the text color, but my htmlText is not rendering:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       title="ReminderPro Basic" backgroundColor="0xCCFFCC"
       creationComplete="init();">
       <fx:Script>
        <![CDATA[
         import spark.components.supportClasses.StyleableTextField;
         
         private var greetingText1:String = "<span style='color: #FF0000; font-weight: bold'>ReminderPro</span> <span style='color: #660066'>makes it easy to create customizable alarms and reminders.</span>";
         [Bindable] private var greetingText2:String = "Great when you need an alarm that repeats, such as a reminder to check something in the over.";
         [Bindable] private var greetingText3:String = "Keep your kids accountable when limiting video game usage.";
         
         private function init():void{
          StyleableTextField(greetingTA1.textDisplay).htmlText = greetingText1;    
         }
        ]]>
       </fx:Script>
       <s:layout>
        <s:VerticalLayout gap="20" paddingTop="50" paddingLeft="30"
         paddingRight="30" paddingBottom="50"
         horizontalAlign="center"/>
       </s:layout>
       <s:TextArea id="greetingTA1" width="100%" borderVisible="false"
        selectable="false" editable="false" skinClass="skins.CustomTextAreaSkin1"
        textAlign="center"/>
       <s:TextArea id="greetingTA2" width="100%" borderVisible="false"
          selectable="false" editable="false" skinClass="skins.CustomTextAreaSkin1"
          color="0x660066" textAlign="center" text="{greetingText2}"/>
       <s:TextArea id="greetingTA3" width="100%" borderVisible="false"
          selectable="false" editable="false" skinClass="skins.CustomTextAreaSkin1"
          color="0x660066" textAlign="center" text="{greetingText3}"/>
       <s:Spacer height="20"/>
       <s:Button label="New Reminder" click="navigator.pushView(views.NewReminderView)"/>
       <s:Spacer height="20"/>
       <s:Button label="Saved Reminders" click="navigator.pushView(views.SavedRemindersView)"/>
      </s:View>