Skip navigation
hidarikani
hidarikani
Currently Being Moderated

s:TileGroup doesn't size to contents

Jan 20, 2011 12:30 AM

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.

1644 Views   6 Replies   Latest reply: okpoubelle, Mar 7, 2013 7:41 AM
 
Replies
  • hidarikani
    Currently Being Moderated
    1. hidarikani,
    Jan 20, 2011 2:43 AM   in reply to hidarikani
    Report

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

     
    |
    Mark as:
  • Shongrunden
    Currently Being Moderated
    2. Shongrunden,
    Jan 22, 2011 11:45 PM   in reply to hidarikani
    Report

    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?

     
    |
    Mark as:
  • hidarikani
    Currently Being Moderated
    3. hidarikani,
    Jan 26, 2011 11:58 PM   in reply to Shongrunden
    Report

    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

     
    |
    Mark as:
  • Shongrunden
    Currently Being Moderated
    4. Shongrunden,
    Feb 14, 2011 10:46 AM   in reply to hidarikani
    Report

    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.

     
    |
    Mark as:
  • okpoubelle
    Currently Being Moderated
    5. okpoubelle,
    Mar 7, 2013 7:36 AM   in reply to hidarikani
    Report

    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;
}
     
    |
    Mark as:
  • okpoubelle
    Currently Being Moderated
    6. okpoubelle,
    Mar 7, 2013 7:41 AM   in reply to okpoubelle
    Report

    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;
            }
     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points