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.

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

Answer 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.