December{"Tue",29(2009)};

(Finally) A workaround for tab text shift

When a tab is selected in a flex TabBar or TabNavigator, the text shifts down a single pixel. Because of the way I have my app skinned, this downward shift looks horrible. I spent the last month posting pleas for help on FlexCoders and Adobe’s forums, stepping line-by-line through the Flex SDK, and reading all of the default Flex CSS. I still haven’t been able to find the culprit, but I did hack together a fix to negate the change.

When the tab is selected, I have it shift its label up 1px (negating the downward shift), and when it’s unselected, it shifts back. For some reason I was only able to do this via actionscript- setting these properties as CSS styles did nothing. Since I’m already using a butchered copy of FlexLib, it was easy to hack this into the SuperTab’s set selected(…) function:

The example is view-source enabled, though it’s pretty messy.

If anyone knows a better fix to this problem I’d love to hear it. Insane bonus points if you can find the line of code/css in the FlexSDK that’s causing the shift.

postdetails{ }

This entry was posted on Tuesday, December 29th, 2009 at 12:33 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “(Finally) A workaround for tab text shift”

  1. Doug McCune Says:
    December 29th, 2009 at 2:33 pm

    check out the layoutContents method of the Tab class in the SDK:

    override mx_internal function layoutContents(unscaledWidth:Number,
    unscaledHeight:Number,
    offset:Boolean):void
    {
    super.layoutContents(unscaledWidth, unscaledHeight, offset);

    // If we’re pressed, offset the label down by a pixel
    if (selected)
    {
    textField.y++;

    if (currentIcon)
    currentIcon.y++;
    }

  2. Dennis Falling Says:
    December 30th, 2009 at 2:56 pm

    Awesome- thanks. I kept looking in Button.as since that’s the class that’s referred to the most in TabBar. Totally forgot about Tab.

Leave a Reply