Question

Is there an easy way to make a parent container (eg Group) resize when it’s children resize?

Below is a little example app. When I put the 200×200 ‘food’ in the ‘stomach’ the stomach & it’s containing 100×100 ‘body’ should resize to contain the food.

Any ideas?

(from this gist http://gist.github.com/301292)

<?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/halo"
      minWidth="1024"
      minHeight="768"
      creationComplete="application1_creationCompleteHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;

   protected function application1_creationCompleteHandler(event:FlexEvent):void {

   }

   protected function eatFoodTrigger_clickHandler(event:MouseEvent):void {
    var food:Border = new Border();
    food.setStyle('backgroundColor', 0x15DCA9);
    food.width = 200;
    food.height = 200;

    stomach.addElement(food);

   }
  ]]>
 </fx:Script>

 <s:Group verticalCenter="0" horizontalCenter="0">
  <s:layout>
   <s:VerticalLayout horizontalAlign="center" />
  </s:layout>

  <s:Label fontSize="24" text="The 100x100 pink/brown body has a stomach inside it.
     Press eat and the stomach gets 200x200 'food' added to it.
     I want the body and the stomach to expand to fit the food." width="200">
  </s:Label>

  <s:Border id="body"
      backgroundColor="0x333333"
      minWidth="100"
      minHeight="100"
      borderColor="0xFF4466"
      borderWeight="5">
   <s:Group id="stomach">
   </s:Group>
  </s:Border>

  <s:Button id="eatFoodTrigger" click="eatFoodTrigger_clickHandler(event)" label="eat" />
 </s:Group>
</s:Application>

Answer 1

Ok so it was a bug in the flex 4 sdk, and it’s been fixed. Awesome.

From: http://forums.adobe.com/thread/575252

Your example works for me in a recent
build. Perhaps it was a bug in an old
build. Try one of the new nightly
builds:

http://opensource.adobe.com/wiki/display/flexsdk/DownloadFlex4

-Ryan