I ran into an issue a few days ago where the first label in my TabNavigator was being truncated when displayed within a popup window. It was baffling; the issue would only occur in a popup window. Further, if you hovered over the tab the full label would display, but the tab’s width wouldn’t change.

Needless to say, it was a trifle annoying. I finally found a solution here, which confirmed that it was a measuring issue in Flex when dealing with popups. While the solution at the aforementioned link worked, I noticed that it took a second for the change to register after the tabs were displayed. This means you would actually see the first label truncated for a moment before the tabs were remeasured.

Figuring I could do one better, I came up with my own custom component:

package
{
    import mx.containers.TabNavigator;
    import mx.controls.Button;
    import mx.events.FlexEvent;

    public class PopUpFriendlyTabNavigator extends TabNavigator
    {
        public function PopUpFriendlyTabNavigator ()
        {
            super ();

            addEventListener (FlexEvent.CREATION_COMPLETE,
                onCreationComplete);
        }

        private function onCreationComplete (event : FlexEvent) : void
        {
            var firstTab : Button = getTabAt (0);

            if (firstTab)
            {
                firstTab.invalidateDisplayList ();
                firstTab.validateNow ();
            }
        }

    }
}


Nothing fancy here. Just like the other solution, I created a custom TabNavigator and call invalidateDisplayList() on the first tab in a creationComplete event handler.

However in my solution I also immediately call validateNow() which eliminates the truncated label before the tabs are displayed. I also added some error handling (for good measure) to make sure the first tab exists.