Setting the vertical gap between items in a Flex VBox container

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.

7 thoughts on “Setting the vertical gap between items in a Flex VBox container

  1. 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>

  2. 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.

  3. 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.

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

Comments are closed.