4 Replies Latest reply on Dec 7, 2009 10:26 AM by cheftimo

    How to display formated html in a TextArea?

    julien.63

      Hi,

       

      I'm trying to display some html in a TextArea. But the formatting does not look good.

       

      here is my mxml file

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
           width="100%" height="100%">
           
                <mx:TextArea id="legend" 
                     width="100%" height="100%" editable="false" selectable="false" toolTip="map legend" wordWrap="true">
                     <mx:htmlText>
                          <![CDATA[
                               <p><img src="images/projects.png" /> projects</p>
                               <p><img src="images/publications.png" /> pubpcations</p>
                               <p><img src="images/persons.png" /> persons</p>
                               <p><img src="images/news.png" /> news</p>
                               <p><img src="images/events.png" /> events</p>
                               <p><img src="images/documents.png" /> documents</p>
                          ]]>
                     </mx:htmlText>
                </mx:TextArea>
      
      </mx:Panel>
      
      

       

       

      and here is the result...

      prio_legend.png

       

       

      Any idea what I am doing wrong?

        • 1. Re: How to display formated html in a TextArea?
          funkysoul Level 4

          as in html you need to align the image to center the text or viceversa, i think that would do the trick.

          http://www.echoecho.com/htmlimages07.htm

          • 2. Re: How to display formated html in a TextArea?
            julien.63 Level 1

            thanks for your answer, I've tried to change the xml to this :

             

            <mx:htmlText>
                                <![CDATA[
                                     <p><img src="images/projects.png" align="absmiddle"/> projects</p>
                                     <p><img src="images/publications.png" align="absmiddle" /> publications</p>
                                     <p><img src="images/persons.png" align="absmiddle" /> persons</p>
                                     <p><img src="images/news.png" align="absmiddle" /> news</p>
                                     <p><img src="images/events.png" align="absmiddle" /> events</p>
                                     <p><img src="images/documents.png" align="absmiddle" /> documents</p>
                                ]]>
                           </mx:htmlText>
            

             

            But it didn't work.


            And actually, I think the problem is something else. Even without any align attribute, the image and the text should be on the same line within a given paragraph (<p></p>). And that's not the case if you look at the screenshot in my first post.


            Here below is a how it displays in a html page (without align attribute). And I think it should be possible to have the same result in a textArea, isnt' it?

            prio_legend_2.png

            • 3. Re: How to display formated html in a TextArea?
              paul.williams Level 4

              The <img> tag is not fully supported in htmlText. See the link below for information:

               

              http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html

              • 4. Re: How to display formated html in a TextArea?
                cheftimo Level 2

                I had problems like what you are describing. A picture is worth a thousand words, so take a lookee here: http://www.timos.com/timos/green/ct/CounterThink.cfm. When the app displays, press the link button "About CounterThink", then scroll down to the text block with Mike Adams' photo.

                 

                My problems were fixed when I eliminated all the spaces in the HTML code. My source code for that block now looks like this:

                 

                <p><img src="../../assets/images/green/mike.png" alt="Mike Adams" width="150" height="149" hspace="5" vspace="3" align="left" />The creator of the cartoons, <b>Mike Adams</b> is a consumer health advocate with a mission to teach personal and planetary health to the public He is a prolific writer and has published thousands of articles, interviews, reports and consumer guides, impacting the lives of millions of readers around the world who are experiencing phenomenal health benefits from reading his articles. Adams is an honest, independent journalist and accepts no money or commissions on the third-party products he writes about or the companies he promotes.</p><p></p><p>In 2007, Adams launched EcoLEDs, a manufacturer of mercury-free, energy-efficient LED lighting products that save electricity and help prevent global warming. He's also a successful software entrepreneur, having founded a well known email marketing software company whose technology currently powers the NaturalNews email newsletters.</p><p></p><p>Adams is currently the executive director of the Consumer Wellness Center, a 501(c)3 non-profit, and regularly pursues cycling, nature photography, Capoeira and Pilates. Known as the 'Health Ranger', Adams' personal health statistics and mission statements are located at <a href=http://www.healthranger.org target="_blank"><u>www.HealthRanger.org</u></a>.</p>

                 

                Notice there are no indents, no line breaks, not a single space except for those within the text. The code is a little harder to read this way, but that is what worked. Try it, I hope this works for you. Have fun,

                 

                Carlos