Multi line text in Flex doesnt recalculate when runtime css is changed

Question

For loading time considerations I am using a runtime css file in my Flex Application.

I am having a problem with a multi line text control :

<mx:Text id="txtDescription" selectable="false"
styleName="imageRolloverButtonTextDark" width="100%" textAlign="center"
text="{_rolloverText}"/>

When my CSS stylesheet has loaded the text style correctly changes, but the height is not recalculated. It appears to be just a single line field.

FYI: The control is not actually visible, and triggered by a rollover. So I dont really care if the stylesheet hasnt loaded and they get standard system text. I jsut want it to be the correct height when it has been loaded.

Answer 1

Could you use a fixed pixel width instead of 100%? I've had issues with 100% being wrongly calculated on dynamic text controls before.

Answer 2

Per the Adobe documentation for Text

Sizing a Text control

Flex sizes the Text control as follows:

If you specify a pixel value for both the height and width properties, any text that exceeds the size of the control is clipped at the border.

If you specify an explicit pixel width, but no height, Flex wraps the text to fit the width and calculates the height to fit the required number of lines.

If you specify a percentage-based width and no height, Flex does not wrap the text, and the height equals the number of lines as determined by the number of Return characters.

If you specify only a height and no width, the height value does not affect the width calculation, and Flex sizes the control to fit the width of the maximum line.

As a general rule, if you have long text, you should specify a pixel-based width property. If the text might change and you want to ensure that the Text control always takes up the same space in your application, set explicit height and width properties that fit the largest expected text.

So the trick I've used to deal with this is to have the Text get its width via a binding expression from whatever container limits it's width, typically the immediate parent.

e.g.

<mx:Canvas id="box" width="100%" backgroundColor="Red">
    <mx:Text width="{box.width}" text="{someReallyLongString}" />
</mx:Canvas>

Answer 3

For any one else who has this problem, The solution I found was to create a custom component extending the mx.controls.Text

and then override the styleChange() Method, and explicitly call the invalidateDisplayList() method for the text field once the style has been applied.

It should be called automatically when the styleis changed but no...for some reason in flex 3.5 it is not.

public class TextObject extends Text { //... override public function styleChanged(styleProp:String):void { invalidateDisplayList(); } }

Hope that save some one all the time I lost on it.