1 Reply Latest reply on Dec 11, 2007 4:58 AM by soup_pot

    Dynamic TextArea Height

      I want the height of my TextArea to dynamically grow to fit the htmlText contained within it. I've seen this problem posted on many forums/blogs but the solutions provided don't seem to work for me.

      I have multiple TextArea controls being populated with htmlText from an external XML file. The XML is loaded via HTTPService:

      <mx:HTTPService id="featureData" url="assets/article_text.xml"/>

      A Repeater creates a TextArea for each paragraph node it encounters in the loaded XML. Upon the completion event, the TextArea calls a resizeTextArea() function:

      <mx:Repeater id="repeatParas" dataProvider="{featureData.lastResult.content.body_text.p}">
      <mx:TextArea htmlText="{repeatParas.currentItem}" width="80%" borderStyle="none" verticalScrollPolicy="off" creationComplete="resizeTextArea(event)" />

      The resizeTextArea() function attempts to resize the TextArea to the size of the text height:

      private function resizeTextArea(event:Event):void{
      var area:TextArea = event.target as TextArea;
      area.height = area.textHeight;

      But what results is a TextArea that is far too large with lots of extra whitespace at the bottom. This amount of whitespace varies based on the amount of text/spaces in the XML, i.e more text/spaces in XML = more whitespace at the bottom of the TextArea.

      No matter what I try, nothing seems to work. Has anyone managed to get this working successfully?
        • 1. Re: Dynamic TextArea Height
          soup_pot Level 1
          Ignore me! (Why does it always happen that as soon as I post something I figure out the solution??) By setting the condenseWhite property to true and adding 10 pixels to the height, I got this to work!

          private function resizeTextArea(event:Event):void{
          var area:TextArea = event.target as TextArea;
          area.condenseWhite = true;
          area.height = area.textHeight + 10;