Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex: when hiding components in flex

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.

like image 730
Niels Bosma Avatar asked Dec 17 '08 16:12

Niels Bosma


People also ask

Why should we use display flex on a parent DIV?

Why choose flexbox? In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items.


2 Answers

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>


like image 111
mmattax Avatar answered Oct 12 '22 15:10

mmattax


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.

like image 36
user47162 Avatar answered Oct 12 '22 14:10

user47162