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

© 2011 Anuj Gakhar
%d bloggers like this: