1 Reply Latest reply on Jul 25, 2006 6:32 PM by jtan

    "Grid" doesn't respect includeInLayout property when computing its size

    slangley
      I tried to submit this as a bug report but the BUG SYSTEM HAS A 2000 CHARACTER LIMIT!!! That kinda makes it difficult to submit a sample program that demonstrates the problem. I'll post this here in case anyone has a workaround (or in case anyone at Adobe cares about bug reports.)

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

      <!--

      I am trying to use the "includeInLayout" and "visible" properties to make a GridRow
      inside a Grid invisible. That works, but the Grid **does not adjust its height to compensate**
      as advertised. (I even tried forcing the height and width to zero as suggested in the FAQ; it still
      doesn't work.)

      To reproduce the problem just run this app and click the "Make Row Two Invisible" button.
      You will see that row two *does* vanish, and row three slides up to take its place, but the
      Grid itself does *not* resize as expected. (A similar test using VBox instead of Grid *does*
      work correctly, so I am pretty sure the bug is specific to Grid's layout algorithm. It is
      probably not ignoring "includeInLayout=false" children when computing its height. A quick
      look at the Grid.as source code seems to confirm this; all the row heights are added in,
      even if they have "includeInLayout=false".)

      Steve Langley
      AmberPoint, Inc.
      slangley@amberpoint.com
      -->
      <mx:Script>
      <![CDATA[
      public function makeInvisible():void
      {
      rowtwo.includeInLayout = false;
      rowtwo.visible = false;
      rowtwo.explicitHeight = 0;
      rowtwo.explicitWidth = 0;
      }
      public function makeVisible():void
      {
      rowtwo.includeInLayout = true;
      rowtwo.visible = true;
      rowtwo.explicitHeight = undefined;
      rowtwo.explicitWidth = undefined;

      }
      ]]>
      </mx:Script>

      <mx:Canvas x="20" y="20" height="100" width="387">
      <mx:Grid backgroundColor="0xeeeeee" horizontalGap="0" verticalGap="0" x="30" y="30">

      <mx:GridRow id="rowone">
      <mx:GridItem horizontalAlign="right">
      <mx:Text text="Row One:" fontWeight="bold" />
      </mx:GridItem>
      <mx:GridItem >
      <mx:Text text="some text" />
      </mx:GridItem>
      </mx:GridRow>

      <mx:GridRow id="rowtwo" >
      <mx:GridItem horizontalAlign="right" >
      <mx:Text text="Row Two:" fontWeight="bold" />
      </mx:GridItem>
      <mx:GridItem >
      <mx:Text text="some more text" />
      </mx:GridItem>
      </mx:GridRow>

      <mx:GridRow id="rowthree">
      <mx:GridItem horizontalAlign="right" >
      <mx:Text text="Row Three:" fontWeight="bold" />
      </mx:GridItem>
      <mx:GridItem >
      <mx:Text text="still more" />
      </mx:GridItem>
      </mx:GridRow>

      </mx:Grid>

      <mx:Button label="Make Row Two Invisible" click="makeInvisible()" x="30"/>
      <mx:Button label="Make Row Two Visible" click="makeVisible()" x="207"/>
      </mx:Canvas>

      </mx:Application>