Setting the vertical gap between items in a Flex VBox container

by Peter deHaan on January 3, 2008

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 as: verticalGap

{ 5 comments… read them below or add one }

1 coco 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
2 peterd 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
3 molaro 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
4 Cyril 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
5 John laPlante 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