How can I get the height of mx: textarea so that it is the same as the content

Question

The initial height of the text area is much larger than the content, I can not find a way to make it always equal to the height than the text content:

<mx:TextArea id="textarea" borderStyle="solid" width="100%" wordWrap="true" selectable="false" backgroundAlpha="0" focusAlpha="0" text="this is a little test" />

Gives a rectangle that is much higher than necessary.

It also gives an uninteresting problem if you have links in the content, since the mouseover link is triggered when it’s next to the link.

<mx:Script>
<![CDATA[
public function onInit():void
{
    var style:StyleSheet = new StyleSheet();

    var aLink:Object = new Object();
    aLink.color = "#0000FF";

    var aHover:Object = new Object();
    aHover.color = "#00FF00";
    aHover.textDecoration = "underline";

    style.setStyle( "a:hover", aHover );
    style.setStyle( "a:link", aLink );

    textarea.styleSheet = style;
}
]]>
</mx:Script>


<mx:TextArea id="textarea" width="100%" wordWrap="true" borderStyle="solid" selectable="false" backgroundAlpha="0" focusAlpha="0" >
    <mx:htmlText>
    <![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
    </mx:htmlText>
</mx:TextArea>

The Text component does not suffer from this, but I cannot attach a stylesheet to a text component.

Hope someone can help. Or is there some other component that I can use when I can add a stylesheet to style anchor tags.

TextArea.as, "2 x", , , , , , , , :

override protected function measure():void
{
    super.measure();

    measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
    measuredWidth = DEFAULT_MEASURED_WIDTH;
    // TextArea is minimum of two lines of text
    measuredMinHeight = measuredHeight = 2 * DEFAULT_MEASURED_MIN_HEIGHT;
}

Answer 1

, /, UITextField.

package
{
    import flash.events.Event;
    import flash.text.StyleSheet;

    import mx.controls.Text;

    import mx.core.mx_internal;

    use namespace mx_internal;

    public class StyledText extends Text
    {
        public function StyledText()
        {
            super();
        }

        private var _styleSheet:StyleSheet = null;

        [Bindable("stylesheetChanged")]
        public function get styleSheet():StyleSheet {
            return _styleSheet;
        }

        public function set styleSheet(value:StyleSheet):void {
            _styleSheet = value;

            if ( textField ) {
                textField.styleSheet = _styleSheet;
            }

            dispatchEvent(new Event("stylesheetChanged"));
        }

        override protected function createChildren():void {
            super.createChildren();

            //textField is created in the createChildren 
            //method of the Label class
            if ( textField && styleSheet ) {
                textField.styleSheet = _styleSheet;
            }
        }

    }
}

:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" preinitialize="onInit()">
    <mx:Script>
    <![CDATA[
    public function onInit():void
    {
        var style:StyleSheet = new StyleSheet();

        var aLink:Object = new Object();
        aLink.color = "#0000FF";

        var aHover:Object = new Object();
        aHover.color = "#00FF00";
        aHover.textDecoration = "underline";

        style.setStyle( "a:hover", aHover );
        style.setStyle( "a:link", aLink );

        text.styleSheet = style;
    }
    ]]>
    </mx:Script>


    <ns1:StyledText id="text" x="0" y="79">
        <ns1:htmlText>
        <![CDATA[<a href='event:http://www.adobe.com'>Navigate to Adobe.com.</a> this is testing nothing at all really]]>
        </ns1:htmlText>
    </ns1:StyledText>

</mx:Application>

Answer 2

, , :

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=13628&productId=2.

Answer 3

Based on the Bedwyr link, I thought I would try redoing the height myself, and this seems to work fine (until I noticed any bad side effects, but maybe):

this.addEventListener( Event.CHANGE, onReMeasure );
this.addEventListener( Event.RESIZE, onReMeasure );

override protected function measure():void
{
        super.measure();

        measuredMinWidth = DEFAULT_MEASURED_MIN_WIDTH;
        measuredWidth = DEFAULT_MEASURED_WIDTH;

        var lm:TextLineMetrics = getLineMetrics( 0 );
        measuredMinHeight = measuredHeight = DEFAULT_MEASURED_MIN_HEIGHT;
}

private function onReMeasure( eventObj:Event ):void
{
    var ht:Number = 0;
    for( var n:int = 0; n < textField.numLines; n++ )
    {
        ht += textField.getLineMetrics(n).height;
    }
    ht += 10;   // padding

    height = ht;
    validateNow();
}