Fixed automatic activation of Spark TextArea or RichText

Question

I searched this topic many times, but it seems like I'm either outdated or just not working.

With TextFields in the past, you could set the TextField to a specific width, set wordWrap to true, and you will get a text field that changed the height to match the text you added.

Now I am trying to do this using Spark TextArea or RichText.

I tried this HeightInLines = NAN, but it seems deprecated.

I also tried this procedure:

var totalHeight:uint = 10; this.validateNow(); var noOfLines:int = this.mx_internal::getTextField().numLines; for (var i:int = 0; i < noOfLines; i++) { var textLineHeight:int = this.mx_internal::getTextField().getLineMetrics(i).height; totalHeight += textLineHeight; } this.height = totalHeight; 

But mx_internal is not in Spark components.

I am trying to do this with AS3 and not with MXML. If anyone has suggestions or links that can help me figure this out with AS3, I would really appreciate it.

Answer 1

Fighting this all day. But it looks like the RichEditableText component will be authorized if you set its width and leave its height undefined.

Answer 2

This works great:

 <?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" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <s:TextArea updateComplete="event.currentTarget.heightInLines = NaN" /> </s:Application> 

Found in the comments here . You can do the same in ActionScript using the same updateComplete event.

Answer 3

This is how I set the height of the TextArea to match its contents when used inside the ItemRenderer (for example, for the List component):

 private function onUpdateComplete( e: Event ): void { // autoresize the text area if ( theText ) { var actualNumOfLines: int = theText.textFlow.flowComposer.numLines; theText.heightInLines = actualNumOfLines; invalidateSize(); } } 

ItemRenderer must have this property:

 <s:ItemRenderer ... updateComplete="onUpdateComplete(event)> 

The updateComplete event may not be the optimal trigger for auto-resize actions, but it works fine for me.

Answer 4

You can remove the scrollers from the TextArea skin and it will become autoresistant. You can download the completed shell here: http://www.yumasoft.com/node/126

Answer 5

Performing the same head banging on this s: TextArea, and then figured out that this is doing its job:

 <s:RichEditableText id="txtArea" left="0" right="0" backgroundColor="#F7F2F2" change="textChanged()" /> 

Answer 6

Here's the solution for areas of spark text (it works like mx text areas):

 var ta_height:int; for(var i:int=0; i < StyleableTextField(myTextArea.textDisplay).numLines; i++) { ta_height += StyleableTextField(myTextArea.textDisplay).getLineMetrics(i).height; } myTextArea.height = ta_height; 

Answer 7

This seems to work for me:

 <s:TextArea id="testTextArea" change="testTextArea_changeHandler(event)" updateComplete="testTextArea_updateCompleteHandler(event)"/> <fx:Script> <![CDATA[ protected function testTextArea_changeHandler(event:TextOperationEvent):void { testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2; } protected function testTextArea_updateCompleteHandler(event:FlexEvent):void { testTextArea.height = RichEditableText(testTextArea.textDisplay).contentHeight + 2; } ]]> </fx:Script>