4 Replies Latest reply on Apr 30, 2010 4:10 PM by Shongrunden

    TileLayout within Group sizes Parent component incorrectly

    Hilary Bridel

      If I use a TileLayout within a Group with an orientation of 'rows', the Parent component always gets sized (height) to the size of all the items as if they were in two columns.

       

      <?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"
                     backgroundColor="#565555">
          <fx:Declarations>

       

          </fx:Declarations>
          <s:Panel  width="80%" horizontalCenter="0" id="room1" autoLayout="true">
              <s:Group width="100%" id="layoutGroup" minHeight="97">
                  <s:layout>
                      <s:TileLayout orientation="rows" id="tileLayoutItem">
                         
                      </s:TileLayout>
                  </s:layout>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
                  <s:Button width="205" height="79"/>
              </s:Group>
              <s:Button label="Change orientation" click="{tileLayoutItem.orientation = tileLayoutItem.orientation == 'columns'?'rows':'columns'}"/>
          </s:Panel>
      </s:Application>

       

      I would have thought the parent should size to the size of the total rows, not the size of the items if they were in 2 columns?

       

      Am I doing something wrong?

        • 1. Re: TileLayout within Group sizes Parent component incorrectly
          Hilary Bridel Level 1

          After further investigation, I have found that setting the parent container to a specific width, rather than a percentage seems to fix the problem.

           

          So I changed this line:

           

                  <s:Group width="100%" id="layoutGroup" minHeight="97">

           

          to this:

                  <s:Group  width="{room1.width}" id="layoutContainer"  minHeight="97">

           

          and now working ok.

          Has to be a bug, unless anyone knows otherwise...

           

          Hilary

           

          --

          • 2. Re: TileLayout within Group sizes Parent component incorrectly
            Shongrunden Adobe Employee

            Looks like a bug to me.  Here is a slightly reduced case that demonstrates the width of layoutGroup (shown in red) doesn't get smaller than two columns:

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark">
               
                <s:Panel width="80%">
                    <s:Group id="bgGroup" width="100%" height="100%">
                       
                        <s:Rect width="100%" height="100%">
                            <s:fill><s:SolidColor color="red" /></s:fill>
                        </s:Rect>
                       
                        <s:Group width="100%" id="layoutGroup">
                            <s:layout>
                                <s:TileLayout />
                            </s:layout>
                            <s:Button label="1" width="205" height="79"/>
                            <s:Button label="2" width="205" height="79"/>
                            <s:Button label="3" width="205" height="79"/>
                            <s:Button label="4" width="205" height="79"/>
                            <s:Button label="5" width="205" height="79"/>
                            <s:Button label="6" width="205" height="79"/>
                            <s:Button label="7" width="205" height="79"/>
                            <s:Button label="8" width="205" height="79"/>
                            <s:Button label="9" width="205" height="79"/>
                            <s:Button label="10" width="205" height="79"/>
                            <s:Button label="11"  width="205" height="79"/>
                            <s:Button label="12" width="205" height="79"/>
                            <s:Button label="13" width="205" height="79"/>
                        </s:Group>
                    </s:Group>
                </s:Panel>
            </s:Application>

             

            Could you please file a bug and post the link here?

            • 3. Re: TileLayout within Group sizes Parent component incorrectly
              Peter deHaan Level 4

              What about if you set clipAndEnableScrolling to true?

               

               <s:TileLayout clipAndEnableScrolling="true" />
               

               

              Peter

              • 4. Re: TileLayout within Group sizes Parent component incorrectly
                Shongrunden Adobe Employee

                After a little more investigation it turns out that this is by design and not a bug.  As Peter mentioned you could set clipAndEnableScrolling="true" or set minWidth="0" to get the behavior you are looking for.

                 

                See the comments here for the full explanation of what is going on:
                http://bugs.adobe.com/jira/browse/SDK-23595