<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html">
    <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
        <mx:TabNavigator id="notfixedTabNav" width="100%" height="50%">
            <mx:Canvas label="One" width="100%" height="100%"/>
            <mx:Canvas label="Two" width="100%" height="100%"/>
            <mx:Canvas label="Three" width="100%" height="100%"/>
            <mx:Canvas label="Without Fix" width="100%" height="100%"/>
        </mx:TabNavigator>
        <mx:TabNavigator id="fixedTabNav" width="100%" height="50%">
            <mx:Canvas label="One" width="100%" height="100%"/>
            <mx:Canvas label="Two" width="100%" height="100%"/>
            <mx:Canvas label="Three" width="100%" height="100%"/>
            <mx:Canvas label="With Fix" width="100%" height="100%"/>
        </mx:TabNavigator>            
    </mx:VBox>
    
    <mx:Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;
            import mx.events.FlexEvent;
            
            /*
            *    @author: Michiel Vancoillie
            *    http://www.ninetynine.be
            */
            
            private function init():void{
                
                //fix the first selected tab
                fixedTabNav.addEventListener(Event.ADDED_TO_STAGE,onTabNavCreated);
                //fix the newly selected tab
                fixedTabNav.addEventListener(IndexChangedEvent.CHANGE,onTabNavChanged);
                
                //JUST ADD THE SAME EVENTLISTENERS TO ALL TABNAVIGATORS YOU WANT FIXED
                //notfixedTabNav.addEventListener(Event.ADDED_TO_STAGE,onTabNavCreated);
                //notfixedTabNav.addEventListener(IndexChangedEvent.CHANGE,onTabNavChanged);
            }
            
            private function onTabNavCreated(e:Event):void{
                var tabNav:TabNavigator = e.target as TabNavigator;
                tabNav.getTabAt(tabNav.selectedIndex).setStyle('paddingTop',-1)
            }
            
            private function onTabNavChanged(e:IndexChangedEvent):void{
                var tabNav:TabNavigator = e.target as TabNavigator;
                //reset the old tab
                tabNav.getTabAt(e.oldIndex).setStyle('paddingTop',0);
                //fix the new tab
                tabNav.getTabAt(e.newIndex).setStyle('paddingTop',-1);
            }
        ]]>
    </mx:Script>
    
</mx:Application>