2 Replies Latest reply on Jun 27, 2011 11:17 PM by newbie_dev

    Flex Grid :: width changes automatically if vertical scroll policy is "on"

    newbie_dev Level 1

      Using Flex 4.1

       

      I have a grid whose vertical scroll policy is "on" as I want to vertical scroll bar to be shown always. But when I start adding rows to the grid, the width of the grid keeps increasing by 15 (width of scroll bar?). I have pasted a very simple application below where this behaviour is seen.

       

       

      Any idea why this happens?? Am I missing mentioning something?

       

      There was a bug with vertical scroll policy (http://www.nbilyk.com/flex-scrollpolicy-bug) but it is about horizontal scroll bar appearing when vertical scroll bar is needed instead of content adjusting. It doesnt say anything about the width increasing.

       

       

      Initial snapshot : Notice how the distance between the grid's scroll bar and the black border is changing as we add more rows

      Grid_with two rows.JPG

      Grid_with four rows.JPG

      Grid_with more rows.JPG

       

       

      The application has just one grid with a row containing just a button. the width of everything is set to 100%

       

       

      <?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="500" minHeight="600"

                        width="500">

       

           <fx:Script>

                <![CDATA[

                     protected function add_clickHandler(event:MouseEvent):void

                     {

                          var gridRow : GridRow = new GridRow();

                          gridRow.width = grid.width;

                          grid.addElement(gridRow);

                         

       

                          var gridItem : GridItem = new GridItem();

                          gridItem.width = gridRow.width;

                          gridRow.addElement(gridItem);

                         

       

                          var button : Button = new Button();

                          button.width = gridItem.width;

                          button.label = "some other row";                   

                          gridItem.addElement(button);

                     }

                ]]>

           </fx:Script>

       

           <fx:Declarations>

                <!-- Place non-visual elements (e.g., services, value objects) here -->

           </fx:Declarations>

       

      <s:BorderContainer

                borderAlpha="1" borderColor="0x000000"

                width="100%" height="100%">

       

       

          

           <s:Button

                id="add" x="10" y="10"

                label="Add one row to grid below"

                click="add_clickHandler(event)"/>

       

          

           <mx:Grid

               id="grid"  x="0" y="50"

         verticalScrollPolicy="on"

               width="70%">

       

                <mx:GridRow width="100%">

                     <mx:GridItem width="100%">

                          <s:Button width="100%" label="first row"/>

                     </mx:GridItem>

                </mx:GridRow>

           </mx:Grid>

       

           </s:BorderContainer>

       

      </s:Application>