Flex 4 Auto-Resizeable TextArea Component
Sometimes I feel like a big dummy, especially when I spend a couple of hours trying to programmatically create an auto-resizeable TextArea in Flex 4.
There are several Flex 3 examples out there, some that call invalidateSize() and others that use methods in the mx_internal namespace for dynamically determining how many lines of text are displaying and resizing the component that way.
Nothing was working for me until I realized that Flex 4 has this functionality built right in! Of course…*bangs head on desk*.
The Spark version of the TextArea class has a “heightInLines” property which you can use to specify the height in lines (imagine that!?) of the component when not explicitly setting a “height” in pixels or a percentage. It turns out that you can set this property to NaN (or “Not A Number”), which then causes the component to resize itself automatically as the number of lines of text changes. Genius!
Remember, explicitly setting a height will prevent this action from working so use “minHeight” and “minWidth” instead to set the default starting size of the TextArea:
1 2 3 4 5 6 7 8 9 10 11 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:TextArea id="resizeableTextArea" heightInLines="{NaN}" minHeight="50"/> </s:Application> |
Enjoy!
Nice find. I don’t remember seeing this in the documentation.
Hi,
I’m New to Flex and Flash, I want to develop a auto height textarea with custom scrollbar and for that. In the textarea for the scroll bars I don’t want Top and Bottom Arrows.
could you please help me on that.
********************** This is the MXML file*********************
and
**********************This is the AS file to set the auto height *****************
// ActionScript file
package components {
import flash.events.Event;
import mx.controls.Alert;
import mx.controls.TextArea;
public class DynamicTextArea extends TextArea{
public function DynamicTextArea(){
super();
super.horizontalScrollPolicy = “off”;
super.verticalScrollPolicy = “off”;
this.addEventListener(Event.CHANGE, adjustHeightHandler);
}
private function adjustHeightHandler(event:Event):void{
trace(“textField.getLineMetrics(0).height: ” +
textField.getLineMetrics(0).height);
height = textField.textHeight;
if(height<99){
super.verticalScrollPolicy = "off";
}
else{
super.verticalScrollPolicy = "on";
}
//super.verticalScrollPolicy = "on";
if(height <= textField.textHeight +
textField.getLineMetrics(0).height){
height = textField.textHeight;
validateNow();
}
}
override public function set text(val:String):void{
textField.text = val;
validateNow();
height = textField.textHeight;
validateNow();
}
override public function set htmlText(val:String):void{
textField.htmlText = val;
validateNow();
height = textField.textHeight;
validateNow();
}
override public function set height(value:Number):void{
if(textField == null){
if(height <= value){
super.height = value;
}
}else{
var currentHeight:uint = textField.textHeight +
textField.getLineMetrics(0).height;
if (currentHeight<= super.maxHeight){
if(textField.textHeight !=
textField.getLineMetrics(0).height){
super.height = currentHeight;
}
}else{
super.height = super.maxHeight;
}
}
}
}
}
Please help
Thanks in Advance
In Flex 4, what you’d want to do is create your own skin-class for the vertical scrollbar. And in that skin-class, exclude the upArrow and downArrow skin parts (don’t even add them to the skin). If you’re not familiar with skinning in Flex 4, or have not upgraded to Flex 4, I highly recommend doing so.
Thanks. Just what I was looking for.
Has anyone tried this with flex SDK 4.1
@Scptt Jordan
Yes and for some reason, it’s not working. When setting heightInLines to {NaN} the TextArea is rendering to 1 line in height. Anyone else?
Here’s the code:
[code]
[/code]
Awesome post. Saved me hours of trying to figure it out (like I did in Flex 3) – thanks!