2 Replies Latest reply on Jun 24, 2010 10:29 PM by Dajji

    CSS problem in TextArea

    Dajji Level 3

      I have a TextArea with back and forward buttons. The text area displays some text which gets changed by clicking on the back/forward buttons. The text displayed is html text with some stylesheet applied on it which gets loaded dynamically. Everything works fine except one scenario. If I have a hyperlink as the first character, and I click or select the text in text area and when I move forward or back, the styles changes automatically to something I haven't set anywhere.

       

      Following are the sample mxml and css files. Can someone help me with this?

       

      MXML

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
           
           <mx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     
                     private var news:ArrayCollection = new ArrayCollection();
                     private var newsIndex:Number = 0;
                     private var styles:StyleSheet;
                     
                     private function init():void{
                          news.addItem({text:"This <a href='http://www.google.com'>is</a> first news."});
                          news.addItem({text:"<a href='http://www.google.com'>This</a> is second news."});
                          news.addItem({text:"<a href='http://www.google.com'>This</a> is third news."});
                          news.addItem({text:"<a href='http://www.google.com'>This</a> is fourth news."});
                          news.addItem({text:"<a href='http://www.google.com'>This</a> is fifth news."});
                          tWhatsNew.htmlText = news.getItemAt(newsIndex).text;
                          
                          var urlLoader:URLLoader = new URLLoader();
                          urlLoader.addEventListener(Event.COMPLETE, parseCSS);
                          urlLoader.load(new URLRequest("html.css"));
                     }
                     
                     private function parseCSS(e:Event):void{
                          var css:String = URLLoader(e.currentTarget).data as String;
                          styles = new StyleSheet();
                          styles.parseCSS(css);
                          tWhatsNew.styleSheet = styles;
                     }
                     
                     private function newsNav(direction:String):void{
                          if(direction == "back" && newsIndex > 0){
                               newsIndex --;
                          }else if(direction == "forward" && newsIndex < news.length - 1){
                               newsIndex ++;
                          }
                          
                          tWhatsNew.htmlText = news.getItemAt(newsIndex).text;
                     }
                ]]>
           </mx:Script>
          <mx:Style>
               TextArea{
                    fontSize:     14px;     
               }
          </mx:Style>
      
           <mx:Button id="backButtonNews" click="newsNav('back')"
                buttonMode="true"
                label="Back"/>
                
           <mx:TextArea id="tWhatsNew" 
                htmlText=""
                width="100%" height="130"
                editable="false" 
                styleName="textArea"/>
           
           <mx:Button id="forwardButtonNews" click="newsNav('forward')"
                buttonMode="true"
                label="Forward"/>
                
      </mx:Application>
      

       

      html.css file

       

      a {
           color: #0079b5;
      }
      
      a:hover {
           color: #1d9cdb;
      }
      
      h1 {
           font-size: 18;
           font-weight: bold;
           color: #6b6d72;
      }
      
      h2 {
           font-size: 14;
           font-weight: bold;
           font-style: italic;
           color: #6b6d72;
      }
      
      .hilight {
           color: #666666;
      }
      

        • 1. Re: CSS problem in TextArea
          rtalton Level 4

          The key point is you need to set all the relevant htmlText attributes and assign the proper tags in your htmlText or else Flex will just default the formatting back to something else.

           

          So, in your CSS file, add something like this:

          body

           

           

          {

           

          fontFamily: Times New Roman, Times, _serif;

           

          fontSize: 14;

           

          color: #0000ff;

          }

           

          And when you set up your htmltext, include the <body> tag:

          news.addItem({text:

          "<body>This<a href='http://www.google.com'> is</a> first news.</body>"});

          news.addItem({text:

          "<body><a href='http://www.google.com'>This</a> is second news.</body>"});

          news.addItem({text:

          "<body><a href='http://www.google.com'>This</a> is third news.</body>"});

          news.addItem({text:

          "<body><a href='http://www.google.com'>This</a> is fourth news.</body>"});

          news.addItem({text:

          "<body><a href='http://www.google.com'>This</a> is fifth news.</body>"});


          Now the proper formatting will be applied to the text.

          • 2. Re: CSS problem in TextArea
            Dajji Level 3

            Thanks Buddy!!!

             

            Though I am still in the process of implementing and testing this in real application, it seems to have worked.