flex tabnavigator cuts off labels

Question

I have a problem with the TabNavigator. The labels of the tabs are getting truncated and once the user places their mouse over the tab it redraws again. Is there anyway to redraw the label of the tab programmatically?

Answer 1

I had the same problem with TabNavigator. It was related to TitleWindow where my TabNavigator was located.

This is cool solution from - How to Show a Tab Navigator in a Popup Window

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

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

            this.addEventListener (FlexEvent.CREATION_COMPLETE, onCreationComplete);
        }

        private function onCreationComplete(event:FlexEvent):void
        {
            this.removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);

            var firstTab:Button = getTabAt(0);

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

Answer 2

Try using a Spark TabBar with a ViewStack instead.

Answer 3

You may also want to consider the SuperTabNavigator in FlexLib.