Home > General > Flex 4 Auto-Resizeable TextArea Component

Flex 4 Auto-Resizeable TextArea Component

Sometimes I feel like a big dummy, especially when I spend a couple of hours trying to programmatically create an auto-resizeable TextArea in Flex 4.

There are several Flex 3 examples out there, some that call invalidateSize() and others that use methods in the mx_internal namespace for dynamically determining how many lines of text are displaying and resizing the component that way.

Nothing was working for me until I realized that Flex 4 has this functionality built right in! Of course…*bangs head on desk*.

The Spark version of the TextArea class has a “heightInLines” property which you can use to specify the height in lines (imagine that!?) of the component when not explicitly setting a “height” in pixels or a percentage. It turns out that you can set this property to NaN (or “Not A Number”), which then causes the component to resize itself automatically as the number of lines of text changes. Genius!

Remember, explicitly setting a height will prevent this action from working so use “minHeight” and “minWidth” instead to set the default starting size of the TextArea:

1
2
3
4
5
6
7
8
9
10
11
<?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">
 
	<s:TextArea 
		id="resizeableTextArea"
		heightInLines="{NaN}"
		minHeight="50"/>
 
</s:Application>

Enjoy!

Categories: General Tags:
  1. April 6th, 2010 at 21:19 | #1

    Nice find. I don’t remember seeing this in the documentation.

  2. Srikrishna
    April 22nd, 2010 at 05:29 | #2

    Hi,

    I’m New to Flex and Flash, I want to develop a auto height textarea with custom scrollbar and for that. In the textarea for the scroll bars I don’t want Top and Bottom Arrows.

    could you please help me on that.

    ********************** This is the MXML file*********************

    and

    **********************This is the AS file to set the auto height *****************

    // ActionScript file
    package components {
    import flash.events.Event;

    import mx.controls.Alert;
    import mx.controls.TextArea;

    public class DynamicTextArea extends TextArea{
    public function DynamicTextArea(){
    super();
    super.horizontalScrollPolicy = “off”;
    super.verticalScrollPolicy = “off”;
    this.addEventListener(Event.CHANGE, adjustHeightHandler);
    }
    private function adjustHeightHandler(event:Event):void{
    trace(“textField.getLineMetrics(0).height: ” +
    textField.getLineMetrics(0).height);

    height = textField.textHeight;
    if(height<99){
    super.verticalScrollPolicy = "off";
    }
    else{
    super.verticalScrollPolicy = "on";
    }
    //super.verticalScrollPolicy = "on";
    if(height <= textField.textHeight +
    textField.getLineMetrics(0).height){
    height = textField.textHeight;
    validateNow();
    }

    }
    override public function set text(val:String):void{
    textField.text = val;
    validateNow();
    height = textField.textHeight;
    validateNow();
    }
    override public function set htmlText(val:String):void{
    textField.htmlText = val;
    validateNow();
    height = textField.textHeight;
    validateNow();
    }
    override public function set height(value:Number):void{
    if(textField == null){
    if(height <= value){
    super.height = value;
    }
    }else{
    var currentHeight:uint = textField.textHeight +
    textField.getLineMetrics(0).height;
    if (currentHeight<= super.maxHeight){
    if(textField.textHeight !=
    textField.getLineMetrics(0).height){
    super.height = currentHeight;
    }
    }else{
    super.height = super.maxHeight;
    }
    }
    }

    }
    }

    Please help

    Thanks in Advance

    • April 23rd, 2010 at 17:26 | #3

      In Flex 4, what you’d want to do is create your own skin-class for the vertical scrollbar. And in that skin-class, exclude the upArrow and downArrow skin parts (don’t even add them to the skin). If you’re not familiar with skinning in Flex 4, or have not upgraded to Flex 4, I highly recommend doing so.

  3. Dominik
    May 27th, 2010 at 15:56 | #4

    Thanks. Just what I was looking for.

  4. Scptt Jordan
    July 1st, 2010 at 17:56 | #5

    Has anyone tried this with flex SDK 4.1

  5. Tim John
    July 28th, 2010 at 09:13 | #6

    @Scptt Jordan

    Yes and for some reason, it’s not working. When setting heightInLines to {NaN} the TextArea is rendering to 1 line in height. Anyone else?

    Here’s the code:

    [code]

    [/code]

  6. August 1st, 2010 at 15:21 | #7

    Awesome post. Saved me hours of trying to figure it out (like I did in Flex 3) – thanks!

  7. Mel
    October 26th, 2010 at 01:33 | #8

    @Tim John
    Same issue for me with SDK 4.1
    Any workaround to solve it ?
    Thanks

  8. November 11th, 2010 at 05:20 | #9

    To achieve this in Flex SDK 4.1. you do not need to provide heightInLines=”{NaN}”
    in text area, instead copy/create custom TextArea skin.
    from skin, remove scroller and change the textDisplay properties as below

    from updateDisplayList, change
    textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1;
    to
    textDisplay.left = textDisplay.top = textDisplay.right = 1;

    for both the conditions.

  9. Bruno Trincão (Portugal)
    November 18th, 2010 at 05:52 | #10

    In Flex SDK 4.1 use

  10. Bruno Trincão (Portugal)
    November 18th, 2010 at 06:04 | #11

    In Flex SDK 4.1 use s:RichEditableText

  11. Preethi RA
    July 11th, 2011 at 00:14 | #12

    Excellent and very simple solution.. Thank you very much…

  12. November 22nd, 2013 at 02:00 | #13

    What looks like a great deal upfront, will end up costing you
    time and money down the road. The site provides
    primarily open source hardware designs licensed under the GNU General Public License or Creative Commons licenses, according to the
    Wikipedia site explaining the purpose of Thingiverse.
    Established industrial engineering companies will offer custom machine design
    together with ranges of intelligent machines specialising in tasks such as cutting, punching, laser cutting
    and printing.

  13. December 31st, 2013 at 08:07 | #14

    Hi! I could have sworn I’ve visited this website
    before but after browsing through some of the posts I realized it’s new to me.
    Regardless, I’m certainly pleased I discovered it and
    I’ll be bookmarking it and checking back often!

  14. July 26th, 2014 at 06:54 | #15

    Choose a soap that will cleanse your body and not just perfume it
    a little bit. The US National Library of Medicine warns against ingesting this
    petroleum product. It becomes difficult to treat these scars and therefore acne must be treated with the help
    of oral drugs and topical creams and lotions.

  1. No trackbacks yet.