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.
#1 by John Gag on November 12, 2009 - 5:35 pm
Quote
I was messing around with this last night. Thanks for the example, I am going to give your version a try.
#2 by Adobe Flex Tutorial on November 12, 2009 - 5:53 pm
Quote
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 by Anuj Gakhar on November 13, 2009 - 4:55 pm
Quote
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 by Tim on February 2, 2010 - 9:04 pm
Quote
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 by Anuj Gakhar on February 2, 2010 - 11:14 pm
Quote
@Tim, as long as the whole thing is in a VBox, the height should be adjusted automatically.
#6 by apurv on April 12, 2010 - 2:39 pm
Quote
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
#7 by apurv on April 12, 2010 - 2:41 pm
Quote
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
#8 by apurv on April 12, 2010 - 2:44 pm
Quote
earlier post contains (mx:Form)(mx:FormItem) tag which couldn’t be visible in post……..