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:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="600"





                     protected function add_clickHandler(event:MouseEvent):void


                          var gridRow : GridRow = new GridRow();

                          gridRow.width = grid.width;




                          var gridItem : GridItem = new GridItem();

                          gridItem.width = gridRow.width;




                          var button : Button = new Button();

                          button.width = gridItem.width;

                          button.label = "some other row";                   







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




                borderAlpha="1" borderColor="0x000000"

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





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

                label="Add one row to grid below"





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




                <mx:GridRow width="100%">

                     <mx:GridItem width="100%">

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