Resizing a container when child's visibility is changed?

Question

When I set the visible property to false for a child in a container, how can I get the container to resize? In the example bellow, when clicking on "Toggle", "containerB" is hidden, but the main container's scrollable area is not resized. (I do not want to scroll through a lot of empty space.)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>

Answer 1

Lots of ways, I think given your current code you should listen to the show and hide event on containerB.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationComplete()">
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
public function creationComplete():void{
 containerB.addEventListener(FlexEvent.SHOW, onContainerBChange );
 containerB.addEventListener(FlexEvent.HIDE, onContainerBChange );
}
public function onContainerBChange():void{
if(this.containerB.visible == true){
this.mainContainer.width = this.containerB.width + this.containerA.width
this.mainContainer.height = this.containerB.height + this.containerA.height
} else {
 this.mainContainer.width = this.containerA.width;
this.mainCintainer.height = this.containerA.height;
}
}

    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center" id="mainContainer">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>

I'm writing code in the browser so this should viewed as psuedo code. A big plus for you if, instead of having the resize code in the onContainerBChange handler you invalidate the displaylist and put the code in updateDisplayList();

As a complete aside; I hope your real code does not use a VBox with only a container inside it. In this simple example, there is no reason you can't have eliminate containerA and containerB altogether and just have three buttons in an VBox.

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        public function toggle():void {
            containerB.visible = !containerB.visible;
        }
    ]]>
</mx:Script>
<mx:VBox height="300" width="200" horizontalAlign="center">
    <mx:Button label="Toggle" click="toggle()" width="200"/>
    <mx:VBox id="containerA" height="400" width="150" horizontalAlign="center">
        <mx:Button label="A" height="400" width="100"/>
    </mx:VBox>
    <mx:VBox id="containerB" height="400" width="150" horizontalAlign="center" includeInLayout="{containerB.visible}">
        <mx:Button label="B" height="400" width="100"/>         
    </mx:VBox>
</mx:VBox>
</mx:Application>

Hi, just make the containerB includeInLayout property to be dependant on its visible property,

i just added includeInLayout="{containerB.visible}" in conatinerB property list, this is working, i hope this is wht u were luking for

have a gr8 time

Ankur Sharma