Flex3: How can I make a container resize based on the size of its contents?

Question

FYI, I'm a Flex newbie.

I'm trying to create a Flex application that can automatically shrink based on the size of the components that it contains, so that a user can shrink it to a minimal view to see more of the HTML page it's embedded in.

I know how to change the size of the whole application using ExternalInterface, but I'm having trouble automatically figuring out how much the size changed when something is hidden or shown.

For example:

Let's say I have the following flex layout:

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
        <mx:VBox width="100%" paddingTop="0" paddingBottom="0"
                paddingLeft="0" paddingRight="0" horizontalGap="0" id="mainVBox">
             <mx:HBox>            
                 <mx:Button label="hide-show b" click="{showHideB()}"/>
             </mx:HBox>

             <mx:Text id="a" text="a" fontSize="42" textAlign="center"/>
             <mx:Text id="b" text="b" fontSize="42" textAlign="center"/>

     </mx:VBox>
 </mx:Application>

How can I hide one of the text fields and cause the VBox to shrink? I'm currently setting it to visible = false, but that doesn't seem to affect the parent VBox.

Once the VBox shrinks, how can I detect that the Application no longer needs so much space, and then go about figuring out how much less space it needs?

I've tried using ResizeEvent, but I haven't been able to get them to work, but I could be doing something wrong.

Thanks!

Answer 1

Flex doesn't use the same kind of "display" styling that CSS uses with the HTML DOM. The Flex equivalents of "visibility" and "display" are, respectively, "visible" and "includeInLayout".

So if you want to remove an element from sight AND from the document flow, do something like this:

.aStyle {
  visible: false;
  includeInLayout: false;
}

If setting this in ActionScript you can write it in one line:

  // myVBox is a VBox
  myVBox.visible = myVBox.includeInLayout = false;

Now, as to allowing a container to "shrink to fit" — this is really easy. Just don't put any width or height on it. Your VBox above has a width="100%", which means it will always take up as much room as its parent container and siblings give it.

Answer 2

This is so great! Thank you! I have given up on resizing vbox's to using the ViewStack to dynamically size heights.