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” ]
|
1 2 3 4 5 6 7 8 9 10 11 |
<s:VGroup id="grp1"> <s:Label text="Options" fontWeight="bold" fontSize="18" color="blue"></s:Label> <s:HGroup verticalAlign="middle" id="horizontalgroup1" visible="false"> <s:Label text="Option 1 " fontWeight="bold" width="120"/> <s:TextInput width="200" id="input1" /> </s:HGroup> <s:HGroup verticalAlign="middle" id="horizontalgroup2"> <s:Label text="Option 2" fontWeight="bold" width="120"/> <s:TextInput width="200" id="input2"/> </s:HGroup> </s:VGroup> |
As you can see that I have used visible property on the horizontalgroup1 container. This outputs this
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” ]
|
1 2 3 4 5 6 7 8 9 10 11 |
<s:VGroup id="grpVertical"> <s:Label text="Options" fontWeight="bold" fontSize="16" color="#FF0"></s:Label> <s:HGroup id="horizontalgroup1" includeInLayout="false"> <s:Label text="Option 1" /> <s:TextInput width="200" id="input1" /> </s:HGroup> <s:HGroup id="horizontalgroup2"> <s:Label text="Option 2" fontWeight="bold" width="120"/> <s:TextInput width="200" id="input2"/> </s:HGroup> </s:VGroup> |
I’ve changed the color of the Label and included a property called includeInLayout=”false”
Lets see how the output looks now.
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
|
1 |
<s:HGroup id="horizontalgroup1" includeInLayout="false"> |
|
1 |
to |
|
1 |
<s:HGroup id="horizontalgroup1" visible="false" includeInLayout="{horizontalgroup1.visible}"> |
I hope this helps
Cheers,
Advertisement
Leave a Reply