Hey,
Somethings been bugging me while skinning a flex application :
The label from the selected tab from the TabNavigator component is 1px lower than the other tabs. As you can see in the example.
(It has something to to with the bottom border I’m guessing).
This can help as a visual support you are on a different tab, but I found it rather annoying, so here is my fix for it.
A quick fix by changing the “paddingTop” property.
View source is enabled so can download the example there.
http://ninetynine.be/blog/wp-content/uploads/2009/12/srcview/index.html
This movie requires Flash Player 9
Code after the jump.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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); } |
