Is there a multiline text workaround for Flex

2
votes

Is there a workaround for displaying multiline text in Flex 3? The two controls I have tried so far are mx:Text, and mx:TextArea. Each control has its own bug associated with it. For reference: mx:Text bug - http://bugs.adobe.com/jira/browse/SDK-9819 mx:TextArea bug - http://bugs.adobe.com/jira/browse/SDK-12616. Basically, neither control handles scrolling correctly if you do not specify a height and the text wraps onto the next line (height is determined dynamically by Flex, based on the wrapping). Does anybody have a workaround that might be helpful?

Thanks.

Update: One of the methods I have tried in the past has been to manually calculate the height of a mx:Text element. I can do this by using the following:

var textItem:Text = new Text();
var len:int = value.length;
var lines:int = int(len/115) + 1;
var height:int = lines * 20;
textItem.height = height;

While this seems to get around the problem in mx:Text, there is one big fault. The calculation relies heavily on font-size, letter-spacing, and the width of textItem. I can use this method, and move on with my project. However, maintenance on this is inevitable, and with code like this, it will a gigantic PITA.

2
apache-flexactionscript-3
Why can't you specify the height? – Walt W
The text that will be populating this field could be 0 - 1024 chars in length. If I specify the height for the edge case of 1024 the UI looks vacant with a one or two word string. I will update the question with another case I have tried. – Rob Lund

2 Answers

7
votes

I've had to deal with this a few times myself. The best way I've found to get dynamic height sizing of <mx:Text> is to leave the height out of the text and then specify a percent height of 100% on the enclosing VBox, HBox, etc. Something like the following should work for you:

<mx:VBox width="100%" height="100%">
    <mx:Text text="Your really long text goes here." width="100%"/>
</mx:VBox>

As this is a bit of a hack itself, your milage may vary.

Edit

If you want to extend your above example so that maintenance on the code is easier, you should look into the TextLineMetrics class. This will allow you to measure the width and height of your text, taking into account font, size, etc. The docs for TextLineMetrics can be found here. To use your above example, you'd want to do something like the following:

var textItem:Text = new Text();
var metrics:TextLineMetrics = textItem.measureText( value );
var len:int = metrics.width;
var lines:int = int(len/textItem.width) + 1;
var height:int = lines * metrics.height;
textItem.height = height;
1
votes

I use a variable height text area class that works very well for me:

package
{
    import mx.controls.TextArea;

    /**
     * TextArea that xpands to the height of the content contained
     * within. 
     * @author joel
     * 
     */ 
    public class VariableHeightTextArea extends TextArea
    {
        public function VariableHeightTextArea()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(this.height != int(this.textField.measuredHeight) + 5 )
            {
                this.height = this.textField.measuredHeight + 5;
            }           
        }
    }
}