?
Solved

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

Posted on 2010-01-03
6
Medium Priority
?
1,557 Views
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: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
Comment
Question by:chuela
  • 3
  • 3
6 Comments
 
LVL 19

Expert Comment

by:moagrius
ID: 26167372
you could remove it from the display list:

box1.parent.removeChild(box1);
0
 

Author Comment

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

0
 
LVL 19

Expert Comment

by:moagrius
ID: 26167717
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:chuela
ID: 26168021
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
 
LVL 19

Accepted Solution

by:
moagrius earned 2000 total points
ID: 26168046
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
 

Author Comment

by:chuela
ID: 26168104
You are absolutely right and it works exactly like the HTML option!
Thank You
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
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…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
Suggested Courses
Course of the Month15 days, 23 hours left to enroll

850 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