3 Replies Latest reply on Sep 14, 2009 10:57 PM by crissy84

    100% height does not work for Grid?

    crissy84

      Hello again,

      It seems that setting height to 100% for the Grid layout container does not work.  I would expect the bottom edge of the grid to stop before flowing off of the screen and a vertical scrollbar to appear ON THE GRID. But instead, it will flow below the bottom of the screen and a vertical scrollbar will appear on the parent container (in this case, an HBox, VBox, etc) and I have to scroll the whole parent container down to get to the bottom of the grid.

       

      Example:

      <mx:HBox height=100%">

           <mx:Grid  width="500" height="100%" >

                <mx:GridRow>

                     <mx:GridItem>

                          <mx:Label text="123"/>

                     </mx:GridItem>

                </mx:GridRow>

                 .

                 .

                [bunch of these repeated...]

                .

                .

                <mx:GridRow>

                     <mx:GridItem>

                          <mx:Label text="123"/>

                     </mx:GridItem>

                </mx:GridRow>

           </mx:Grid>

      </mx:HBox>

       

      Is this a bug? Am I doing something wrong?  Or does it just not work in the same way as other containers?  Anybody know if a good workaround?  I really need my grid dimensions to be constrained (100% x 100%) and it's driving me crazy.

       

      Thanks!!

        • 1. Re: 100% height does not work for Grid?
          crissy84 Level 1

          As soon as posted this, I got an idea which kinda/sorta works.  But I'd still like to know if there's a better way or what the deal is.

           

          I set the Grid's default height to 0, then in the resize event for the parent box, I set the grid's height equal to the parent container's height (minus a little to prevent an 2nd outer scrollbar).  See below.

          <mx:HBox id="outer" height=100%" resize="inner.height = outer.height - 5">

           

               <mx:Grid id="inner"  width="500" height="0" >

                    <mx:GridRow>

                         <mx:GridItem>

                              <mx:Label text="123"/>

                         </mx:GridItem>

                    </mx:GridRow>

                     .

                     .

                    [bunch of these repeated...]

                    .

                    .

                    <mx:GridRow>

                         <mx:GridItem>

                              <mx:Label text="123"/>

                         </mx:GridItem>

                    </mx:GridRow>

               </mx:Grid>

           

          </mx:HBox>

          • 2. Re: 100% height does not work for Grid?
            _Natasha_ Level 4

            Try to add this on Canvas

            • 3. Re: 100% height does not work for Grid?
              crissy84 Level 1

              Hi Natasha,

              Thank you for the suggestion.  But unfortunately it still gives me the same behavior.  I still have to scroll down (using an outer scrollbar) to get to the grid's horizontal scrollbar at the bottom which has gone off screen.