2 Replies Latest reply on Jan 5, 2011 11:52 PM by Wrataxas

    Bug in sizing of tabs in TabBar


      For certain font sizes, the widths of the tabs in a TabBar are going crazy.  Here is normal behavior, with fontSize="14":


      The tab widths are proportional to the text widths.  But with fontSize="20":


      All the extra space gets distributed to the wider tab.  And the load time is 6 seconds instead of 1.  The code for this is quite simple (included below) so I'm assuming it's a bug in Flex.  I put notes on what I found in the code.


      How can this be reported to to Adobe?  And does anyone have a workaround?  (Other than just changing font sizes, that is.)  Thanks.



      <?xml version="1.0" encoding="utf-8"?>
      <!-- ====================================================================
      TabBarSizing application
      This code demonstrates a bug where for a wide TabBar and a specific font
      size, the widths of the tabs are not calculated correctly.  All the extra
      space is allocated to the tab with the wider label, resulting in one very
      wide tab and one very narrow tab.  Also, the load time is many times
      longer than it should be, about 6 seconds, as opposed to just 1 second
      with a smaller font size.
      I debugged through the problem a bit, and what's happening is that
      ButtonBarHorizontal layout is using layoutElement.getPreferredBoundsWidth()
      to determine the current size of each tab, distributing the extra space
      (since the TabBar is wide) proportionately to each tab, and setting the
      new width with layoutElement.setLayoutBoundsSize().  This works fine the
      first time that ButtonBarHorizontalLayout.updateDisplayList() is called.
      However, for each subsequent time it's called, getPreferredBoundsWidth()
      returns a value that is 4 pixels narrower than what was set with
      setLayoutBoundsSize(), for each tab.  The ButtonBarHorizontalLayout sees
      that it has an extra 8 pixels to distribute (there are two tabs) and so
      it distributes them proportionately, 5 to the wider one and 3 to the
      narrower one.  It gets called again and again hundreds to times, each time
      shifting one pixel from the narrower tab to the wider tab.
      The problem only happens at certain font sizes.  On my Mac, fontSize 20
      causes the problem but fontSize 14 does not.
      ====================================================================== -->
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        minWidth="955" minHeight="600" width="1000" height="720">
           <s:SkinnableContainer height="{height}" width="{width}" y="0" x="0" backgroundColor="#F1B6B6">
                <s:TabBar x="10" y="80" width="900" height="40" fontSize="20" dataProvider="{theStack}" />
                <mx:ViewStack id="theStack" x="10" y="128" width="{width - 20}" height="500" borderVisible="false">
                     <s:NavigatorContent label="Sentences">
                          <s:Label text="For Sentences"/>
                     <s:NavigatorContent label="Actors">
                          <s:Label text="For Actors"/>
        • 1. Re: Bug in sizing of tabs in TabBar
          Wrataxas Level 2

          The problem seems to have less to do with font size and more to do with how much wider the text for one tab is than the other.  So even at fontSize="14" if I make the first tab's label be "Sentences For The Mind" the problem occurs.  At fontSize="20" I can make the problem go away by changing the second tab's label to be "ActorXXX", with the first tab's label as "Sentences".  So the trigger for the problem is text length disparity.

          • 2. Re: Bug in sizing of tabs in TabBar
            Wrataxas Level 2

            I logged this as bug SDK-29039.


            I still don't have a workaround.  I tried using HorizontalLayout for the TabBar but I couldn't get the tabs resized either horizontally or vertically to look reasonable.