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

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

  1. coco says:

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

  2. peterd says:

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

    Peter

  3. molaro says:

    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>

  4. Cyril says:

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

  5. John laPlante says:

    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.

  6. Lorenzo Campanis says:

    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.

  7. laissun says:

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

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree