Setting the vertical gap between items in a Flex VBox container

By Peter deHaan On January 3, 2008 · 7 Comments

The following example shows how you can control the amount of vertical spacing between items in a VBox container by setting the verticalGap style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/setting-the-vertical-gap-between-items-in-a-flex-vbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HSlider {
            dataTipPlacement: bottom;
            dataTipPrecision: 0;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.SliderEvent;
 
            private function slider_change(evt:SliderEvent):void {
                vBox.setStyle("verticalGap", evt.value);
            }
 
            private function vBox_creationComplete(evt:FlexEvent):void {
                slider.value = vBox.getStyle("verticalGap");
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalGap:"
                    direction="horizontal">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
                <mx:Label text="{slider.value}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:VBox id="vBox"
            width="100%"
            creationComplete="vBox_creationComplete(event);">
        <mx:Box width="100%" height="50" backgroundColor="red" />
        <mx:Box width="100%" height="50" backgroundColor="haloOrange" />
        <mx:Box width="100%" height="50" backgroundColor="yellow" />
        <mx:Box width="100%" height="50" backgroundColor="haloGreen" />
        <mx:Box width="100%" height="50" backgroundColor="haloBlue" />
    </mx:VBox>
 
</mx:Application>

View source is enabled in the following example.

Tagged with: verticalGap

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

7 Responses to Setting the vertical gap between items in a Flex VBox container

coco says:

January 4, 2008 at 1:22 am

Hi,peter,
I have a question,how do you put the SWF file into this blog?It’s easy?
coco

Reply
peterd says:

January 4, 2008 at 10:02 am

Really easy. I just use an <iframe />.
You can view-source and see all my HTML.

Peter

Reply
molaro says:

February 4, 2009 at 9:01 am

I have a Panel with VBoxes inside it. I can use verticalGap like you did above to control the spacing between them as expected. However, if I make a custom MXML component based off a VBox, and add the multiple instances of the custom component instead of straight VBoxes, the verticalGap property is ignored. Is there a trick to getting that scenario to work?

———— WORKS:
<mx:Panel width=”100%” height=”100%” title=”Works” verticalGap=”0″>
<mx:VBox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
<mx:VBox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
<mx:VBox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
</mx:Panel>

———– DOESN’T WORK:
<mx:Panel width=”100%” height=”100%” title=”Works” verticalGap=”0″ xmlns:comp=”components.*”>
<comp:MyVbox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
<comp:MyVbox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
<comp:MyVbox width=”700″ height=”100″ borderStyle=”solid” borderColor=”#FF0000″ />
</mx:Panel>

— MyVbox
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”500″ height=”100″>
<!– DOESN”T MATTER WHAT IS INSIDE –>
</mx:VBox>

Reply
Cyril says:

September 16, 2009 at 8:02 am

Can anyone give an ex of the boxes such that there is no gaps between the boxes, I cannot get rid of the gaps

Reply
John laPlante says:

October 29, 2009 at 8:30 am

This was very helpful. This approach to playing with styles – using a slider – is really a good way to play with styles and avoid doing excessive change & compile cycles. It’s great to get an example that works because it allowed me to deconstruct my problem with gaps. I’m using Flex Builder 3 and the gaps don’t appears to be settable from the Design mode of the IDE. I hope that Flex Builder becomes more robust in future versions. It’s frustrating to look at the preview in design mode and see the gap but find no way to eliminate that gap.

Reply
Lorenzo Campanis says:

September 23, 2011 at 4:52 am

Hello,

I have posted a comment on this adobe page:
ADOBE TLF Images
If you could please have a look and possibly give us an explanation, it would be highly appreciated as we cannot find anything only on the matter.
Thank you.

Reply
laissun says:

December 19, 2011 at 1:45 am

Hello ! thanks for this example
but if i want define verticalGap property with flex 4 through the equivalent spark component VGroup ?

Reply