Flex - How to Show / Hide HBoxes similar to Display:none in HTML

Posted on 2010-01-03
Last Modified: 2013-11-11
In FLEX, I have a panel control with 3Hboxes and a button
Only one of these HBoxes should display at a time (when one is shown the other 2 are hidden and this is triggered by the button)
The problem is that If I set the HBoxes properties to Visible="False", they still take up space in the Panel control.

And If I use includeInLayout=False then I get a nasty issue with the button overlapping

How can these HBoxes be set so that they do not take space while hidden and behave like a <div style="display:none"></div> in HTML


		<mx:Hbox id="box1" visible="false">This HBOX is hidden But Takes Space</mx:Hbox>

		<mx:Hbox id="box2" visible="true"> This HBOX is visible</mx:Hbox>

		<mx:Hbox id="box3" visible="false">Hidden but also takes space</mx:Hbox>

		<mx:Button click="shownextHbox()" />


Open in new window

Question by:chuela
    LVL 19

    Expert Comment

    you could remove it from the display list:


    Author Comment

    Almost there
    Do you know if I can pass this box ID parameter dynamically?
    myPanel.removeChild("box" + n);

    LVL 19

    Expert Comment

    i'm not 100% sure this works in Flex (it does in "real" ActionScript), but you can try:

    myPanel.removeChild(this["box" + n]);

    also, you can use removeChildAt(index);

    so myPanel.removeChildAt(0) would remove the first child.

    otherwise, you can just add each box reference to an array and use that:

    var boxes:Array = [box1,box2,box3];


    Author Comment

    Thank You but it does not work
    The problem lies in then showing the box again
    I don't know how to do that (hide and show an HBox inside a panel) just like hiding showing a <div> tag in HTML

    IN HTML you can just set display="none"; through Javascript to a layer to hide it and then display=""  to redisplay it. I just need a similar behavior to it
    LVL 19

    Accepted Solution

    you can use addChild or addChildAt to put it back (same syntax)...  there's no directly identical method like display:none, and the example you gave at first (visible and includeInLayout set to false).  the display list is the closest approximation to display:none (both remove the item from the display list)

    Author Comment

    You are absolutely right and it works exactly like the HTML option!
    Thank You

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
    The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
    The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
    The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

    731 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now