Spark TextArea or RichText autosize

Question

I have done lots of searching on this subject, but it seems what I am finding is either out of date or just does not seem to work.

With TextFields in the past, you could set the TextField to a certain width, set wordWrap to true and you would end up with a textfield that changed height according to the text you added.

Now I am trying to do this with either the Spark TextArea or RichText.

I tried this HeightInLines = NAN, but that seems to be out of date.

I also tried this routine:

var totalHeight:uint = 10;
this.validateNow();
var noOfLines:int = this.mx_internal::getTextField().numLines;
for (var i:int = 0; i < noOfLines; i++) 
{
     var textLineHeight:int = 
                     this.mx_internal::getTextField().getLineMetrics(i).height;
     totalHeight += textLineHeight;
}
this.height = totalHeight;

But the mx_internal is not in the Spark components.

I am trying to do this with AS3, not MXML. If anyone has any suggestions or links that could help me figure this out using AS3, I'd really appreciate it.

Answer 1

Been struggling with this all afternoon. But it looks like the RichEditableText component will autosize if you set its width and leave its height undefined.

Answer 2

This works fine:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:TextArea updateComplete="event.currentTarget.heightInLines = NaN" />
</s:Application>

Found in comments here. You can do the same in ActionScript using the same updateComplete event.

Answer 3

This is how I set the height of a TextArea to fit its content when used inside an ItemRenderer (e.g. for a List component):

private function onUpdateComplete( e: Event ): void
{
    // autoresize the text area
    if ( theText ) {
      var actualNumOfLines: int = theText.textFlow.flowComposer.numLines;
      theText.heightInLines = actualNumOfLines; 

      invalidateSize();
    }
}

ItemRenderer must have this property set:

<s:ItemRenderer ... updateComplete="onUpdateComplete(event)>

Maybe the updateComplete event is not the optimal trigger for auto-resize actions but works fine for me.

Answer 4

You can remove scrollers from TextArea's skin and it becomes autoresizable. You can download completed skin here: http://www.yumasoft.com/node/126