2 Replies Latest reply on Mar 6, 2011 1:17 PM by Shongrunden

    How to allow spark group to horizonally/vertically align children outside its bounds?

    fosrias

      I have a spark group the resizes with the application. Inside it I have children with miscellaneous verticalCenter and horizontalCenter constraints. When I make the window smaller, the chilren recenter until they run into either the left side or top of the parent. At that point they stay pinned there. You can see this with the following code and drag the window smaller and you will see the black box stop at those sides:

       

      <?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">

       

          <s:BorderContainer left="10" top="10" bottom="10" right="10">
              <s:Group width="100%" height="100%">
                  <s:BorderContainer width="200" height="200"
                                     horizontalCenter="{-100}"
                                     verticalCenter="{-100}"
                                     backgroundColor="0"/>
              </s:Group>
          </s:BorderContainer>
      </s:Application>

       

      Canvas lets you do this. You can see this changing the group in the code above to a Canvas.

       

      Any idea how get the group the let the child align outside the bounds the way a canvas does? Or is this a bug or a regression? Thanks.

        • 1. Re: How to allow spark group to horizonally/vertically align children outside its bounds?
          Shongrunden Adobe Employee

          You'll need to set clipAndEnableScrolling to true on the Group.  Spark containers don't clip by default, whereas mx containers did.

           

          Here's an example:

           

          <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">

           

              <s:controlBarContent>

                  <s:Button label="toggle clipAndEnableScrolling" click="myGroup.clipAndEnableScrolling = !myGroup.clipAndEnableScrolling" />

              </s:controlBarContent>

           

              <s:layout>

                  <s:VerticalLayout />

              </s:layout>

           

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

                  <s:BorderContainer left="10" top="10" bottom="10" right="10">

                      <mx:Canvas id="myCanvas" width="100%" height="100%">

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

                                             horizontalCenter="-100"

                                             verticalCenter="-100"/>

           

                          <s:BorderContainer width="5" height="5" borderVisible="false"

                                             horizontalCenter="0"

                                             verticalCenter="0"

                                             backgroundColor="red"/>

           

                      </mx:Canvas>

                  </s:BorderContainer>

              </s:Group>

           

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

                  <s:BorderContainer left="10" top="10" bottom="10" right="10">

                      <s:Group id="myGroup" width="100%" height="100%">

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

                                             horizontalCenter="-100"

                                             verticalCenter="-100"/>

           

                          <s:BorderContainer width="5" height="5" borderVisible="false"

                                             horizontalCenter="0"

                                             verticalCenter="0"

                                             backgroundColor="red"/>

                      </s:Group>

                  </s:BorderContainer>

              </s:Group>

           

          </s:Application>

          • 2. Re: How to allow spark group to horizonally/vertically align children outside its bounds?
            Shongrunden Adobe Employee

            The fact that the Group behavior is different based on clipAndEnableScrolling may be a bug, I have filed one here: http://bugs.adobe.com/jira/browse/SDK-29846 for further investigation.