Flex Mobile Component show hide won’t get rid of the space with setting visible true or false

Hi Guys,

I though this could be a useful tip for someone who is trying to show/hide a component and when the component hides itself the space is still shown.

Well let take a problem solution approach and I will use some screen shots to show you what the actual problem is

Say you have a Vertical group as shown below

[geshi lang=”mxml” nums=”1″ target=”_self” ]

As you can see that I have used visible property on the horizontalgroup1 container. This outputs this

Flex Show Hide containers

 

As you clearly see that this leaves a blank space between our Label and second horizontal group.

Ideal? No.

So how can we fix this

Well simple use the includeInLayout Property so the above code can be rewritten as

[geshi lang=”mxml” nums=”1″ target=”_self” ]

I’ve changed the color of the Label and included a property called includeInLayout=”false”

Lets see how the output looks now.

Flex display none

 

So as you can see this is pretty much equivalent to CSS’s display:none

There are many use cases where this will help you. One of which is the reason you are reading this post.

Just in case you don’t want to create mess in your code and are using visible property widely then this may help you fix the space issue

Change this line

I hope this helps

Cheers,

Advertisement

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.