MultiLine Label in Flex
Tagged Under : Flex
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.







I was messing around with this last night. Thanks for the example, I am going to give your version a try.
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
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.
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?
@Tim, as long as the whole thing is in a VBox, the height should be adjusted automatically.