2 Replies Latest reply on Aug 20, 2010 12:44 AM by Craig Grummitt

    craziness in component width

    Craig Grummitt Level 3

      I'm getting some strange things happening in the Spark buttonBar component - after a certain number of buttons exist, the buttons are being resized, and the component width is being incorrectly read by the Scroller container. To highlight the problem, I have set up a sample application:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/mx" 
                        minWidth="955" minHeight="600" >
           <fx:Script>
                <![CDATA[
                     import com.craiggrummitt.util.ArrayUtils;
                     
                     import mx.collections.ArrayCollection;
                     
                     private function fillArray(totalItems:int):Array {
                          var filledArray:Array=new Array();
                          for (var i:int=0;i<totalItems;i++) {
                               filledArray.push('title '+i);
                          }
                          return(filledArray);
                     }
                     
                ]]>
           </fx:Script>
           <s:VGroup top="10" left="10">
                <s:Label text="spark style button bar - 139 items - working perfectly"/>
                <s:Scroller x="11" top="10" width="960">
                     <s:HGroup width="960">
                          <s:ButtonBar dataProvider="{new ArrayCollection(fillArray(144))}" height="40"/>
                     </s:HGroup>
                </s:Scroller>
                <s:Label text="spark style button bar - 140 items - missing a few pixels at the right (Scroll to the right to see the problem)"/>
                <s:Scroller x="11" top="10" width="960">
                     <s:HGroup width="960">
                          <s:ButtonBar dataProvider="{new ArrayCollection(fillArray(145))}" height="40"/>
                     </s:HGroup>
                </s:Scroller>
                <s:Label text="spark style button bar - 141 items - starting to go wrong! (Scroll to the right to see the problem)"/>
                <s:Scroller x="11" top="10" width="960">
                     <s:HGroup width="100%">
                          <s:ButtonBar dataProvider="{new ArrayCollection(fillArray(146))}" height="40"/>
                     </s:HGroup>
                </s:Scroller>
                <s:Label text="spark style button bar - 200 items - and it just gets worse! (Scroll to the right to see the problem)"/>
                <s:Scroller x="11" top="10" width="960">
                     <s:HGroup width="100%">
                          <s:ButtonBar dataProvider="{new ArrayCollection(fillArray(200))}" height="40"/>
                     </s:HGroup>
                </s:Scroller>
                <s:Label text="mx style button bar - 200 items - no problems here..."/>
                <s:Scroller x="11" top="10" width="960">
                     <s:HGroup width="960">
                          <mx:ButtonBar dataProvider="{new ArrayCollection(fillArray(200))}"  height="40"/>
                     </s:HGroup>
                </s:Scroller>     
           </s:VGroup>
      </s:Application>