6 Replies Latest reply: Mar 7, 2013 7:41 AM by okpoubelle RSS

    s:TileGroup doesn't size to contents

    hidarikani Community Member

      When the s:TileGroup is wide enough to fit all elements in one row its still 3 rows heigh. Why isn't it dynamically adjusting it's height?

      Setting requestedRowCount to 1 solves the height problem but blocks content reflowing.

        • 1. Re: s:TileGroup doesn't size to contents
          hidarikani Community Member

          It doesn't work with percent width but works fine with pixel width.

          • 2. Re: s:TileGroup doesn't size to contents
            Shongrunden Adobe Employee

            This example seems to work fine:

             

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                           xmlns:s="library://ns.adobe.com/flex/spark">

             

                <s:TileGroup  width="100%" height="100%">

                    <s:Button width="200" height="200" />

                    <s:Button width="200" height="200" />

                    <s:Button width="200" height="200" />

                    <s:Button width="200" height="200" />

                </s:TileGroup>

             

            </s:Application>

             

            Can you provide a small example like this that demonstrates what you are seeing?

            • 3. Re: s:TileGroup doesn't size to contents
              hidarikani Community Member

              The height of the TileGroup should be 21 (height of one button).

              Code:

               

              <?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">
              
              <s:Group width="400">
                   <s:Rect width="100%"
                             height="100%">
                        <s:fill>
                             <s:SolidColor color="0xff0000"/>
                        </s:fill>     
                   </s:Rect>
                   <s:TileGroup width="100%">
                        <s:Button label="foo"/>
                        <s:Button label="foo"/>
                        <s:Button label="foo"/>
                        <s:Button label="foo"/>
                   </s:TileGroup>     
              </s:Group>
              </s:Application>
              

               

              Result:

              TileLayoutTest.PNG

              • 4. Re: s:TileGroup doesn't size to contents
                Shongrunden Adobe Employee

                After further investigation it looks like this is a known issue.

                 

                Check out the comments in this bug: http://bugs.adobe.com/jira/browse/SDK-25495

                 

                "This is a known limitation. TileLayout is not a real re-flow layout the way text works. It doesn't go through a double-pass measure. The only way to get it to re-flow is to set explicit width on the layout's target (the DataGroup, TileGroup or Group with the TileLayout)..."

                 

                There is a minor enhancement filed to allow this to work here: http://bugs.adobe.com/jira/browse/SDK-27688

                 

                Please vote for that enhancement.

                • 5. Re: s:TileGroup doesn't size to contents
                  okpoubelle Community Member

                  Sorry for replying 2 year after, but I was looking for smth similar, and things are not fixed in Flex4.

                  So I created a little function.

                  (It might nor work in all cases, and surely needs some improvement)

                   

                   

                  private function resizeTileGroup(tG:TileGroup):void{
                      var maxH:uint=0;
                      //For each row in tileGroup
                      for (var i:uint=1;i<=tG.rowCount;i++){
                          //increment variable with the height of the first element in row
                          maxH+=tG.getChildAt(i*tG.columnCount-tG.columnCount).height;
                      }
                      //And apply the height to TileGroup (added with verticalgap multiplied by rowCount)
                      tG.height=maxH+tG.verticalGap*tG.rowCount;
                  }
                  
                  • 6. Re: s:TileGroup doesn't size to contents
                    okpoubelle Community Member

                    In case of the TileGroup being generated dynamically, one can dispatch the event like this.

                     

                     

                     

                     myTileGroup.addEventListener(FlexEvent.CREATION_COMPLETE,resizeTileGroup)
                    
                    private function resizeTileGroup(e:FlexEvent):void{
                                    var tG=e.currentTarget;
                                    var maxH:uint=0;
                                    for (var i:uint=1;i<=tG.rowCount;i++){
                                        var elt=tG.getChildAt(i*tG.columnCount-tG.columnCount);
                                        maxH+=elt.height
                                    }
                                    tG.height=maxH+tG.verticalGap*tG.rowCount;
                                }