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.

  15. June 11th, 2020 at 04:28 | #16

    Would love to constantly get updated outstanding website !.

  16. June 17th, 2020 at 06:34 | #17

    You may have an extremely good layout for your blog i want it to work with on my web site also.

  17. June 22nd, 2020 at 05:02 | #18

    prada handbags cheap ??????30????????????????5??????????????? | ????????

  18. June 29th, 2020 at 06:21 | #19

    Thank you for your post.Thanks Again. Awesome.

  19. July 8th, 2020 at 10:35 | #20

    This article is very interesting and gripping. I like your points of view and how well they are expressed. Your content is well-written. Thank you.

  20. July 19th, 2020 at 11:07 | #21

    I\ ave been looking for something that does all those things you just mentioned. Can you recommend a good one?

  21. July 19th, 2020 at 11:16 | #22

    Sounds like anything plenty of forty somethings and beyond ought to study. The feelings of neglect is there in a lot of levels every time a single ends the mountain.

  22. July 26th, 2020 at 23:36 | #23

    This is a great tip especially to those fresh to the blogosphere. Short but very precise information Appreciate your sharing this one. A must read post!

  23. August 6th, 2020 at 08:59 | #24

    It’а†s actually a nice and helpful piece of info. I am satisfied that you simply shared this useful information with us. Please stay us up to date like this. Thank you for sharing.

  24. August 6th, 2020 at 09:31 | #25

    Thanks for the blog article.Thanks Again. Really Cool.

  25. August 17th, 2020 at 09:06 | #26

    Im grateful for the article.Really looking forward to read more. Much obliged.

  26. September 6th, 2020 at 07:41 | #27

    It is super blog, I would like to be like you

  27. September 14th, 2020 at 06:10 | #28

    WONDERFUL Post.thanks for share..extra wait.. ?

  28. September 20th, 2020 at 17:32 | #29

    up to other users that they will help, so here it occurs.

  1. No trackbacks yet.