Flex: when hiding components in flex

14
votes

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.

3
apache-flexactionscript-3

3 Answers

33
votes

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>
14
votes

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.

1
votes

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.