Apache – How to fix overlapping VBox children in a canvas

apache-flexlayout

I have multiple HBoxes inside a VBox inside a canvas like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Canvas  width="600" height="500">
        <mx:VBox height="100%" left="10" right="10">
        <mx:HBox width="100%" >
        <mx:VBox width="48%" height="100%" horizontalAlign="left">
        <mx:Label text="Label" />

        </mx:VBox>

        <mx:VBox width="48%" height="100%" horizontalAlign="left">
        <mx:Label text="Label" />
        <mx:HBox width="100%">
            <mx:VBox width="48%">   
                <mx:Label text="Label" />
                <mx:ComboBox />
            </mx:VBox>

        </mx:HBox>
        </mx:VBox>


        </mx:HBox>
        <mx:VBox>
            <mx:HBox>
                <mx:Label text="Label" />
                <mx:Label text="Label" />
            </mx:HBox>
        </mx:VBox>
        <mx:HBox>
            <mx:Label text="Label" />
            <mx:ComboBox/>
        </mx:HBox>
        <mx:HBox>
        <mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
        includeInLayout="false" >
        <mx:Label text="Label"  />

        </mx:VBox>
        <mx:VBox>
        <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
            includeInLayout="false"
            >
            <mx:VBox >
                    <mx:Label text="Text" />
                    <mx:ComboBox />
            </mx:VBox>
            <mx:VBox>
                    <mx:Label text="Label" />
                    <mx:ComboBox />
            </mx:VBox>
        </mx:HBox>
        <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off"
            includeInLayout="false"
            >
            <mx:VBox>
                <mx:Label text="Label:"/>
                <mx:ComboBox />
            </mx:VBox>
            <mx:VBox>
                <mx:Label text="Label: "/>
                <mx:ComboBox   />
            </mx:VBox>
        </mx:HBox>
        </mx:VBox>
        </mx:HBox>
        <mx:HBox >
            <mx:Label text="Label:" />
            <mx:CheckBox />
        </mx:HBox>
        </mx:VBox>
    </mx:Canvas>
</mx:Application>

The last child in the VBox is overlapping with other components. How do you prevent children of a VBox in a Canvas from overlapping? How do you debug this situation?

I have tried the following:

  • Removing percent based sizing
  • IncludeInLayout = true

Sceenshot – Label and Checkbox Overlapping:
alt text

Best Answer

It's hard to say with the information provided, but the two questions that come to mind first are:

  1. Is your VBox height greater than the sum of the heights of its children?
  2. Have you set the verticalGap property on the VBox? verticalGap determines vertical spacing between children.
Related Topic