Question

I have an image gallery app that has a slider to control the width of the thumbnails that ranges from 80 to 1024. As you move the slider the thumbnails width changes to effectively scaling the image between 80px and 1024px. Below the thumbnail is some information about the image such as the name, size, dimensions, etc. There is also a set of icons that do various tasks (delete, edit, copy, etc). All of this information is located within a VBox.

The problem I am having is I would like to have the VBox hide when the width of the thumbnail reaches 150 px or below. This I have been able to accomplish with the following code:

<mx:VBox visible = "{thumbnail.width &gt; 150}">

The issue is that while the information within the VBox is now not visible, the real estate it takes up is not released. In other words, there is now a blank space the exact size of the VBox. What I’d like to do is to be able to release this space.

I know this is probably something simple that I’m overlooking, but today my brain is just not working, so any help will be appreciated.

BTW: I am using the Flex 3.6 SDK.

Answer 1

Try using includeInLayout:

<mx:VBox visible="{thumbnail.width>150}" includeInLayout="{thumbnail.width>150}">