Flex CSS LinkBar ToggleButtonBar Selected Text Color
Wouldn’t any reasonable coding human assume textSelectedColor to be the color of the text of the selected button in a Flex LinkBar or ToggleButtonBar?
After trying every possible ‘selected’ or ‘active’ CSS tag know to man (actually to Flex), and tracking down every possible path of inheritance, I embraced one of my coding standards: counter-intuitive measures often prevail over reasonable assumptions.
To my dismay, disabledColor was the ticket. It has nothing to do with the selected state and unlike textRolloverColor and textSelectedColor, it has no mention of ‘text’!
So if I had been smart enough to assume that a selected button is actually disabled, I would have been fine. So when you want to dress up your selected button in your LinkBar/ToggleButtonBar with all kinds of nice-nices, just remember that LinkBar and ToggleButtonBar buttons operate like politicians – just because you’ve been selected does not imply that you’re enabled.
LinkButton
{
textRollOverColor: #006699;
textSelectedColor: #003366;
/* Yes, this one controls the selected button's text color */
disabledColor: #0099cc;
/*Use DownSkin for Disabled to simulate Active/Selected Button */
disabledSkin: Embed(source="theme1.swf", symbol="LinkButton_downSkin");
downSkin: Embed(source="theme1.swf", symbol="LinkButton_downSkin");
overSkin: Embed(source="theme1.swf", symbol="LinkButton_overSkin");
upSkin: Embed(source="theme1.swf", symbol="LinkButton_upSkin");
font-size: 14;
font-weight: bold;
}
Dezeloper - jeff boothe 
THANK YOU! I was pulling my hair out over that for an hour.
I’ve also had a problem with the backgroundAlpha on the linkbar, it doesn’t seem to work.
My solution (at least to make it transparent) was:
LinkBar{
borderSkin:ClassReference(null);
}
if anyone else is having that problem…
thanks! I was looking for the same…
Nice – you’re post cracked me up. I run Flex issues like that constantly.
So what does “textSelectedColor” actually do?
I’m not sure about a linkbar but this solution doesn’t work with a ToggleButtonBar (the following will not work).
ToggleButtonBar {
textRollOverColor: #006699;
textSelectedColor: #003366;
disabledColor: #FF0000;
font-size: 14;
font-weight: bold;
}
And just a little update from the last post, to set the text color of a selected button, you need to add the property ” selectedButtonTextStyleName” to the ToggleButtonBar CSS. Something like this:
ToggleButtonBar {
buttonStyleName: “mytoggleButtonBarButtonStyle”;
firstButtonStyleName: “mytoggleButtonBarFirstButtonStyle”;
lastButtonStyleName: “mytoggleButtonBarLastButtonStyle”;
selectedButtonTextStyleName: “mytoggleButtonBarSelectedButtonStyle”;
}
.mytoggleButtonBarButtonStyle {
}
.mytoggleButtonBarFirstButtonStyle {
}
.mytoggleButtonBarLastButtonStyle {
}
.mytoggleButtonBarSelectedButtonStyle {
color: #ffffff;
fontSize: 12;
fontWeight: normal;
fontStyle: normal;
textDecoration: none;
}
Hi..thanks a ton for this… I was looking for this for sometime now.
Thanks so much, i was racking my brains over this for ages !
Dude, thank you soo much… spent about 45 mins looking for this… aghh!!!!!
Thanks man, i just spent two hours trying to figure this out… I almost tried every method!
Hi thanx,
Searching for the this fix for a long time…But one query
What is this
source=”theme1.swf”
Shld i have a theme1.swf
Regards
vishwa
THANK YOU!
this has driven me mental for ages. good find
glenn
I know this is a little old, but I don’t know that you can blame flex for this. It follows CSS conventions that HTML programmers are used to. I do wish, however, that they would have made an effort to break from convention and make it make sense….
Thanks a lot for this. Like everyone else before, I spent a lot of time on this before I stumble on your blog. What I would also like to do is to put the ‘disabled’ button in bold while the rest of the bar would remain normal. Any idea how to do this as there is no ‘disabledFontWeight’.