Automatically resizing text areas in Flex, 06/06/07, Transversality

June 06, 2007

Automatically resizing text areas in Flex

From the Flex 2 controls documentation:

The TextArea control does not resize to fit the text that it contains. If the new text exceeds the capacity of the TextArea control and the horizontalScrollPolicy is true (the default value), the control adds a scrollbar.

Why!!!! Auto-resizing a text area is just such an obvious thing. In the app i’m developing I have some fields that might in some cases be very short, and in others very long. I had to override the default TextArea behaviour so that it would resize to fit whatever text it contains when the text is updated:

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onLoad()">

   <mx:Script>
       <![CDATA[
           import mx.events.FlexEvent;

           private function onLoad():void
           {
               this.addEventListener(FlexEvent.UPDATE_COMPLETE, resizeme);
           }

           private function resizeme(event:Event):void
           {
               var ta:TextArea = event.target as TextArea;
               ta.explicitHeight = ta.textHeight + 10;
           }

       ]]>
   </mx:Script>

</mx:TextArea>