Flex: component changing height when changing styles

Component <mx:Text> has unfortunate tendency to change its dimensions when its height/width was not specified and styles are being changed.

It's most visible when many components, with <mx:Text> inside them are placed in a container - <mx:Repeater> or even <mx:Vbox> which has a scroll. When those components have different styles assigned to over/normal/selected states they are being redrawn whenever user hovers his mouse over them.

Problem is that during style change process dimensions of <mx:Text> are being reset for a few miliseconds thus changing the dimensions of parent components which results in glitchy display or even resetting the position of scrollbars in parent components.

To fix those problems you have to override its styleName setter - you can use wrapping component for that and do something like this:

override public function set styleName(value:Object):void

{

   super.styleName = value;

   if (tContent && tContent.height >= 18) 

   {

      tContent.height = tContent.height;

   }

}

where

<mx:Text id="tContent" minHeight="18" />

Obviously now you'll want to change the styleName of the wrapping component, not <mx:Text> itself.