Flex 3 Auto-Resize TextInput Control? How?

Here is a quick solution to add Auto-Size functionality to TextInput control in Flex 3.

AutoSizeTextInput.class

package com.tushar.controls {
	
	import flash.events.Event;	
	import mx.controls.TextInput;
	
	public class AutoSizeTextInput extends TextInput {
		
		private var txtSpan:uint = 10;
		
		public function AutoSizeTextInput() {
			super();
			this.addEventListener(Event.CHANGE, onTextChange);
		}
		
		private function onTextChange(evnt:Event):void {
			this.textField.scrollH = 0;
			this.width = this.autoSizeWidth;
		}
		
		override protected function commitProperties():void {
			super.commitProperties();
			this.textField.scrollH = 0;
			this.width = this.autoSizeWidth;
		}
		
		private function get autoSizeWidth():uint {
			return (this.textWidth+txtSpan);			
		}
	}
}

Usage in MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:custom="com.tushar.controls.*"
	layout="vertical">
	<custom:AutoSizeTextInput text="Hello world! "/>
</mx:Application>

Not sure if this method is perfect! Do let me know if there is any better way to implement this🙂

About Tushar

Hi, I am Tushar Wadekar from Pune, India. I am an Adobe Certified Flash Developer. My Interests are: Flash, ActionScript, Flex, AIR, PHP, Ruby on Rails. You can reach me at: tusharwadekar[at]gmail[dot]com Thank you! Tushar
This entry was posted in ActionScript3, AS3, components, Flash, Flash CS3, Flex. Bookmark the permalink.

9 Responses to Flex 3 Auto-Resize TextInput Control? How?

  1. Josh Tynjala says:

    It was written for Flex 2, but it should still work. Here’s my Auto-Resizing TextInput control for Flex. It takes a different approach to the implementation.

  2. Tushar says:

    I tried this before but was not working for me in Flex 3!

  3. DIGITALUnderworld says:

    Better way:

    package components {

    import flash.events.Event;

    import mx.controls.TextInput;

    public class AutoSizeTextInput extends TextInput {

    private var txtSpan:uint = 10;

    public function AutoSizeTextInput() {
    super();
    this.addEventListener(Event.CHANGE, onTextChange);
    }

    private function onTextChange(evnt:Event):void {
    this.textField.scrollH = 0;
    this.width = this.autoSizeWidth;
    }

    override protected function commitProperties():void {
    super.commitProperties();
    this.textField.scrollH = 0;
    this.width = this.autoSizeWidth;
    this.validateNow();
    }

    private function get autoSizeWidth():uint {
    var retValue:uint = this.textWidth + txtSpan;

    if( this.minWidth > this.textWidth + txtSpan )
        retValue = this.minWidth;

      return retValue;  
    }
    }
    }

  4. trevorc says:

    Tushar & DIGITALUnderworld

    If I “Focus Into” or “Press Right Arrow” on the End of input Text, it scrolls.

    Josh

    doesn’t have that Problem, but width would fit for shorter Text (also at the beginning)

  5. murugesan munusamy says:

    Thanks for the post.

  6. Vitaliy Tsvayer says:

    package components {
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;
    import mx.controls.TextInput;

    public class AutoSizeTextInput extends TextInput {

    public function AutoSizeTextInput() {
    super();
    this.addEventListener(Event.CHANGE, function(event:Event) {
    invalidateSize();
    });
    }

    override protected function childrenCreated():void {
    this.textField.autoSize = TextFieldAutoSize.LEFT;
    super.childrenCreated();
    }
    }
    }

  7. Vitaliy Tsvayer says:

    And similar for TextArea:

    package components {
    import flash.events.Event;
    import flash.text.TextFieldAutoSize;

    import mx.controls.TextArea;

    public class AutoSizeTextInput extends TextArea {

    public function AutoSizeTextInput() {
    super();
    this.setStyle(“horizontalScrollPolicy”, “off”);
    this.setStyle(“verticalScrollPolicy”, “off”);
    this.addEventListener(Event.CHANGE, function(event:Event) {
    invalidateSize();
    });
    }

    override protected function childrenCreated():void {
    this.textField.autoSize = TextFieldAutoSize.LEFT;
    this.textField.wordWrap = false;
    super.childrenCreated();
    }

    override protected function measure():void {
    super.measure();
    measuredWidth = textField.width;
    measuredHeight = textField.height;
    }
    }
    }

  8. Vitaliy Tsvayer says:

    sorry, in textarea example above replace:

    this.setStyle(“horizontalScrollPolicy”, “off”);
    this.setStyle(“verticalScrollPolicy”, “off”);

    with this:

    horizontalScrollPolicy = “off”;
    verticalScrollPolicy = “off”;

  9. john says:

    Vitaliy Tsvayer your code is not working

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s