When I create a tab dynamically via ActionScript, the style for the newly created (and selected) tab get applied to the skins, but not the text, unless I click on another tab and then click back to it.
This is the A/S, MXML and CSS code I am using:
private function clickAddTabHandler(event:Event):void{
var vbox:VBox = new VBox;
var tab:Canvas = new (Canvas);
vbox.label = "Select Location";
vbox.addChild(tab);
tabBar.addChild(vbox);
tabBar.selectedIndex = tabBar.numChildren-1;
}
.tabNavigator
{
disabledSkin: Embed(source="assets/skins/TabBar-tab_disabledSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
downSkin: Embed(source="assets/skins/TabBar-tab_downSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
overSkin: Embed(source="assets/skins/TabBar-tab_overSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
upSkin: Embed(source="assets/skins/TabBar-tab_upSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
selectedDisabledSkin: Embed(source="assets/skins/TabBar-tab_selectedDisabledSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
selectedUpSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
selectedOverSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
selectedDownSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
scaleGridTop=1,
scaleGridLeft=20,
scaleGridBottom=18,
scaleGridRight=32);
textAlign: left;
paddingLeft: 20;
paddingRight: 20;
fontSize: 11;
fontFamily: Helvetica Neue;
color: #FFFFFF;
textRollOverColor: #FFFFFF;
}
.tabNavigatorSelected
{
textAlign: left;
paddingLeft: 20;
paddingRight: 20;
fontSize: 11;
fontFamily: Helvetica Neue;
color: #135F9E;
textRollOverColor: #135F9E;
textSelectedColor: #135F9E;
}
