MultiLine Label in Flex

Tagged Under :

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.

| Posted by Anuj Gakhar in Flex

Comments:

5 Responses to “MultiLine Label in Flex”

  1. John Gag on 12 Nov 2009 at 5:35 pm #

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

  2. Adobe Flex Tutorial on 12 Nov 2009 at 5:53 pm #

    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. Anuj Gakhar on 13 Nov 2009 at 4:55 pm #

    Hey Fabien, you are right. You can always use <mx:Text> instead of <mx:Label> but I wanted to see why the Label wouldnt work? Hence, this post. :)

  4. Tim on 2 Feb 2010 at 9:04 pm #

    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?

  5. Anuj Gakhar on 2 Feb 2010 at 11:14 pm #

    @Tim, as long as the whole thing is in a VBox, the height should be adjusted automatically.

Leave a Reply