Flex CSS LinkBar ToggleButtonBar Selected Text Color

/in , , /by

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;
}

13 replies
  1. Justin Buser
    Justin Buser says:

    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…

  3. Andrew
    Andrew says:

    Nice – you’re post cracked me up. I run Flex issues like that constantly.

    So what does “textSelectedColor” actually do?

  4. Andrew
    Andrew says:

    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;
    }

  5. Andrew
    Andrew says:

    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;
    }

  10. Vishwa
    Vishwa says:

    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

  12. Robert
    Robert says:

    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….

  13. Eric
    Eric says:

    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’.

Comments are closed.