Multiline text in Flex not recalculating when runtime css changes
For load time considerations, I am using a runtime css file in a Flex application.
I have a problem with multi-line text control:
<mx:Text id="txtDescription" selectable="false"
styleName="imageRolloverButtonTextDark" width="100%" textAlign="center"
text="{_rolloverText}"/>
When my CSS stylesheet loaded, the text style will change correctly, but the height won't be recalculated. It seems to be just one field.
FYI: The control is not actually visible and is caused by rollover. So it doesn't really matter to me if the stylesheet is not loaded and they get the standard system text. I want it to be the correct height when it was loaded.
source to share
For anyone else who has this problem I found a solution to create a custom component extending mx.controls.Text
and then override the styleChange () method and explicitly call the invalidateDisplayList () method on the textbox after the style has been applied.
It should be called automatically when the style has changed, but no ... for some reason in flex 3.5 it doesn't.
public class TextObject extends text {// ... override public function styleChanged (styleProp: String): void {invalidateDisplayList (); }}
Hopefully save all the time I wasted on this.
source to share
In the Adobe documentation for text
Determining the size of a text element
Flex dimensions Text control looks like this:
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 not height, Flex wraps the text according to the width and calculates the height to match the required number of lines.
If you specify a percentage of width and height no, Flex does not wrap the text, and the height is equal to the number of lines specified by the number of Return characters.
If you only specify the height and not the width, the height value does not affect the calculation of the width, and Flex adjusts the size to fit the width of the maximum line.
Typically, if you are long text, you should specify the pixel width property. If the text can change and you want the Text Control to always occupy the same space in your application, set the explicit height and width properties to match the largest expected text.
So, the trick I used to do this is to make the text get width using an anchor expression from any container that bounds its width, usually the closest parent.
eg.
<mx:Canvas id="box" width="100%" backgroundColor="Red">
<mx:Text width="{box.width}" text="{someReallyLongString}" />
</mx:Canvas>
source to share