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

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

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 2

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.

Answer 3

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