Products
Technologies

Developer resources

Multiline text displayed with mx:Text, text moves up by one line when selected and drag down

Avg. Rating 5.0

Problem

Dynamically created mx:text component when filled with text and drag on selected text, top line of the text hidden.

Solution

This is an issue of style property. We need to work with leading property, extend TEXT CLASS and overwrite existing method.

Detailed explanation

This is the original method find from the framework

    /**
     *  @private
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        // Don't call super.updateDisplayList();
        // Text has a different layout algorithm than Label.
        if (isSpecialCase())
        {
            var firstTime:Boolean = isNaN(lastUnscaledWidth) || lastUnscaledWidth != unscaledWidth;
            lastUnscaledWidth = unscaledWidth;
            if (firstTime)
            {
                invalidateSize();
                return;
            }
        }

        // The textField occupies the entire Text bounds minus the padding.
        var paddingLeft:Number = getStyle("paddingLeft");
        var paddingTop:Number = getStyle("paddingTop");
        var paddingRight:Number = getStyle("paddingRight");
        var paddingBottom:Number = getStyle("paddingBottom");
        textField.setActualSize(unscaledWidth - paddingLeft - paddingRight,
                                unscaledHeight - paddingTop - paddingBottom);

        textField.x = paddingLeft;
        textField.y = paddingTop;
        // Although we also set wordWrap in commitProperties(), we do
        // this here to handle width being set through setActualSize().
        if (Math.floor(width) < Math.floor(measuredWidth))
            textField.wordWrap =  true;

}

 

this custom component extent and override class for mx:Text component

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {

            // The textField occupies the entire Text bounds minus the padding.
            var paddingLeft:Number = getStyle("paddingLeft");
            var paddingTop:Number = getStyle("paddingTop");
            var paddingRight:Number = getStyle("paddingRight");
            var paddingBottom:Number = getStyle("paddingBottom");
            var leading:Number = getStyle("leading");

            textField.setActualSize(unscaledWidth - paddingLeft - paddingRight,unscaledHeight - paddingTop - paddingBottom + leading);

            textField.x = paddingLeft;
            textField.y = paddingTop;
            // Although we also set wordWrap in commitProperties(), we do
            // this here to handle width being set through setActualSize().
            if (Math.floor(width) < Math.floor(measuredWidth))
                textField.wordWrap =  true;
        }


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes