Increase text area width by typing text in it

Question

Hi all,
I am using a text area i have set its wordwrap property false and horozontal and vertical policy off..What i want is to increase the width or height of text area depending upon the text i am writing
if  the text is going to increase more than the width of text area the width of text area should adjust itself according to that..
Take a look to the below example
text area text:-
"this is text example"
text area width:-100
now as the word wrap property is off the text will come upto this for width of 100px:-
"this is text"
The moment i press the next character to type..the text area width should increase according to that ..the width should increase side by side
Is there any event for this via which i can get this done
Thanks

Answer 1

I extended TextArea and it works well as a standalone component, but it might not work so well if you use it as an itemRenderer, like in a DataGrid.
I created a Flex Cookbook post on the topic:
http://cookbooks.adobe.com/post_I_want_a_TextArea_that_will_act_like_a_TextInput_t-16596.h tml
If this post answers your question or helps, please mark it as such.
Greg Lafrance
www.ChikaraDev.com
Flex Development and Support Services
------------------------ DynamicWidthTextArea.as -----------------------------
package {
  import flash.events.Event;
  import mx.controls.TextArea;
  public class DynamicWidthTextArea extends TextArea{
    public function DynamicWidthTextArea(){
      super();
      super.horizontalScrollPolicy = "off";
      super.verticalScrollPolicy = "off";
      super.wordWrap = false;
      this.addEventListener(Event.CHANGE, adjustWidthHandler);
    private function adjustWidthHandler(event:Event):void{
      if(width <= textField.textWidth + textField.getLineMetrics(0).width){
        width = textField.textWidth;     
        validateNow();
    override public function set text(val:String):void{
      textField.text = val;
      validateNow();
      width = textField.textWidth;
      validateNow();
    override public function set htmlText(val:String):void{
      textField.htmlText = val;
      validateNow();
      width = textField.textWidth;
      validateNow();
    override public function set width(value:Number):void{
      if(textField == null){
        if(width <= value){
          super.width = value;
      }else{       
        trace("width: " + width);
        trace("super.maxWidth: " + super.maxWidth);
        if (textField.getLineMetrics(0).width<= super.maxWidth){
          trace("textField.textWidth: " + textField.textWidth);
          trace("textField.getLineMetrics(0).width: " + textField.getLineMetrics(0).width);
          if(width <= textField.getLineMetrics(0).width + 10){
            super.width = textField.getLineMetrics(0).width + 10;
        }else{
            super.width = super.maxWidth;         
    override public function get text():String{
        return textField.text;
    override public function get htmlText():String{
        return textField.htmlText;
    override public function set maxWidth(value:Number):void{
      super.maxWidth = value;
--------------------- Test.mxml --------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:comp="*">
  <mx:HBox>
    <mx:Label text="Font size 8: "/>
    <comp:DynamicWidthTextArea width="100" fontSize="8"/>   
  </mx:HBox>
  <mx:HBox>
    <mx:Label text="Font size 10: "/>
    <comp:DynamicWidthTextArea width="100" fontSize="10"/>   
  </mx:HBox>
  <mx:HBox>
    <mx:Label text="Font size 12: "/>
    <comp:DynamicWidthTextArea width="100" fontSize="12"/>   
  </mx:HBox>
  <mx:HBox>
    <mx:Label text="Font size 20: "/>
    <comp:DynamicWidthTextArea width="100" fontSize="20"/>   
  </mx:HBox>
  <mx:HBox>
    <mx:Label text="Font size 40: "/>
    <comp:DynamicWidthTextArea width="100" height="100" fontSize="40"/>   
  </mx:HBox>
  <mx:HBox>
    <mx:Label text="Font size 100: "/>
    <comp:DynamicWidthTextArea width="200" height="120" fontSize="100"/>   
  </mx:HBox>
</mx:Application>