Flex: when hiding components in flex

Question

When I set a component to visible=false the component hides, but how do I get it to take no space (get the container it belongs to to resize??)

<mx:HBox width="100%" height="100%">
...
</mx:HBox>

<mx:HBox width="100%" id="boxAddComment" visible="false" >
    <mx:TextArea id="txtComment"/>
    <mx:Button label="Spara" click="addComment();"/>
</mx:HBox>

When boxAddComment is visible=false I want the first HBox to take 100% height.

Solution 1

use the includeInLayout property. e.g.

<mx:HBox width="100%" height="100%">
...
</mx:HBox>

<mx:HBox width="100%" id="boxAddComment" visible="false" includeInLayout="false" >
    <mx:TextArea id="txtComment"/>
    <mx:Button label="Spara" click="addComment();"/>
</mx:HBox>

Solution 2

Using includeInLayout ="true" or "false" will toggle the space that it takes in the flow of items being rendered in that section.

Important note: If you don't specify visible="false" when using includeInLayout = "false" then you will usually get something that is undesired which is that your item (boxAddComment) is still visible on the page but stuff below id="boxAddComment" will overlap it visually. So, in general, you probably want "includeInLayout" and "visible" to be in synch.

Solution 3

Ross Henderson's suggestion in binding includeInLayout with boxAddComment.visible works great with Flex 3.0 but I found that it's not working in Flex 3.6 (I saw a posting that it actually stops working since Flex 3.3).

Just fyi.

Comments

[Ross Henderson]

This can be a nice way to keep the two values in sync: <mx:HBox id="boxAddComment" visible="false" includeInLayout="{boxAddComment.visible}" >