• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1654
  • Last Modified:

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

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:Panel>
		<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()" />
	</mx:Panel>

Open in new window

0
chuela
Asked:
chuela
  • 3
  • 3
1 Solution
 
moagriusCommented:
you could remove it from the display list:

box1.parent.removeChild(box1);
0
 
chuelaAuthor Commented:
Almost there
Do you know if I can pass this box ID parameter dynamically?
Like
myPanel.removeChild("box" + n);

0
 
moagriusCommented:
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];

myPanel.removeChild(boxes[n]);
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
chuelaAuthor Commented:
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
0
 
moagriusCommented:
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)
0
 
chuelaAuthor Commented:
You are absolutely right and it works exactly like the HTML option!
Thank You
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now