Flex TabBar Tabs do not resize below their display width

Question

We are refactoring some Flex3 to Flex4 code and I have ran into an issue with the Spark TabBar control. In 4.5 when sizing it down below the width of all the tabs the tabs would shrink. I am not seeing this with Flex4 and after doing some Googling I can't seem to find the solution.

What appears to be happening is the minWidth for the TabBar is being set to the total of all the buttons plus the gap between them.

Anythoughts? would be most helpful. I thought this would be easy but have not been able to fix it.

<s:TabBar id="myTabBar" top="0" width="100%" dataProvider="{myTabs}" >
    <s:layout>
        <s:HorizontalLayout gap="1" variableColumnWidth="true" />
    </s:layout>
</s:TabBar>

Update:
I have come up with a solution though I am not sure it is an ideal one. I took the default TabBarSkin and modified to add a measure method. In the measure method I iterate through the tabs, find the label objects, and calculate the width. I use that to then set the maxWidth of the parent component. It does appear to be working but would welcome any comments on this approach. I also took out the layout tag above.

        protected override function measure():void
        {
            //TODO Auto-generated method stub
            super.measure();


            // Calculate the maximum size of the button should stretch to and then set the host Component 
            // To the maxWidth.  This is accomplished by iterating through the children of the dataGroup 
            // and then getting the label components from labelDisplay.   Once you have that then we can 
            // get the PreferredBoundsWidth and add them all up.  The left and right values are added in as 
            // that is the spacing on each side of the label.  
            var totalButtonWidth:Number = 0;
            var tab:UIComponent;
            var calculatedWidth:Number;

            for (var i:int = 0; i < dataGroup.numElements; i++)
            {
                tab = dataGroup.getElementAt(i) as UIComponent;
                calculatedWidth = 0; 
                if (tab.hasOwnProperty("labelDisplay")) 
                {
                    var tabLabel:Label = (tab["labelDisplay"] as Label); 
                    calculatedWidth = tabLabel.getPreferredBoundsWidth() + tabLabel.left + tabLabel.right; 
                }
                totalButtonWidth = totalButtonWidth + calculatedWidth;

            }

            hostComponent.maxWidth = totalButtonWidth;
            trace("totalWidth is " + totalButtonWidth);
        }

If I recall, it is ok to take a skin from the SDK and modify it and reuse it right?

badunk badunk · Accepted Answer · 2012-09-15T00:04:44

Yes it is absolutely OK to do what you said in the update.

However, it may be much easier to just define your own skin from scratch than to modify the existing one. Take a look at this documentation.

Flex TabBar Tabs do not resize below their display width

1 Answers