MultiLine Label in Flex

On November 12, 2009, in Flex, by Anuj Gakhar

If you are a Flex developer, you would have come across this issue several times. If you are using the <mx:Label> control and the size of your text is bigger than the size of the container, you will see a cut off version of the text because by default, the Label control does not allow multiline text.

So, here is what I wrote quickly to achieve this functionality.


package components
{
 import mx.core.UITextField;
 import flash.text.TextFieldAutoSize;
 import mx.controls.Label;
 import flash.display.DisplayObject;

 public class MultiLineLabel extends Label
 {

 override protected function createChildren() : void
 {
 // Create a UITextField to display the label.
 if (!textField)
 {
 textField = new UITextField();
 textField.styleName = this;
 addChild(DisplayObject(textField));
 }
 super.createChildren();
 textField.multiline = true;
 textField.wordWrap = true;
 textField.autoSize = TextFieldAutoSize.LEFT;
 }
 }
}

The code overrides the createChildren() method and creates a new instance of UITextField which has multiline and wordwrap turned on.

Tagged with:  

13 Responses to MultiLine Label in Flex

  1. John Gag says:

    I was messing around with this last night. Thanks for the example, I am going to give your version a try.

  2. Hey,
    mx:Label doesn’t work for multiline but mx:Text works fine for multiline text (with a fixed width), give it a try 🙂

    Fabien
    http://www.flex-tutorial.fr

  3. Tim says:

    Let’s say you use the mx.Text with a fixed width… and there is a label and mx.Text component directly below the first one. Now the displayed data will overlap. How can this overlap be avoided?

  4. apurv says:

    hey i have one question..if i m using tag for my UI form, now i want like this……….
    First
    Name:Apurv khadamkar
    i.e multiline in left hand side names(first name)……how would i achieve this functionality in ……tag….thanx in advance

  5. apurv says:

    hey i have one question that if i m using tag for my UI form, now i want like this……….
    First
    Name:Apurv
    i.e multiline in left hand side names(first name)……how would i achieve this functionality in ……tag

  6. apurv says:

    earlier post contains (mx:Form)(mx:FormItem) tag which couldn’t be visible in post……..

  7. Hi,
    Thanks this saved my time.

  8. James bennit says:

    I’ve been having trouble with my code, but it’s also older than yours. I gave yours a try and it worked..

    Thank you very much for your time and code.

    James Bennit
    Dental Services in IL
    (Dental Implants Bloomington IL)

  9. Mayank Singh says:

    All the methods given above will failed in datagrid.

    Instead of all these things best thing is to use
    spark text area with contentbackgroundalpha = “0”

    for more solutions mail me.!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 445 other subscribers

© 2011 Anuj Gakhar
%d bloggers like this: