How to fix overlapping VBox children in a canvas?

Answer 1

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.

Answer 2

I just tried this (AIR app) and it looks alright to me.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">


    <mx:Canvas height="100%" width="100%"
      borderStyle="solid" 
      backgroundColor="0x0000ff">

      <mx:VBox height="100%" width="100%">

        <mx:VBox backgroundColor="0xff0000" height="50%" width="100%">
        <mx:HBox backgroundColor="0x000000" height="50%" width="50%"/>
        <mx:HBox backgroundColor="0xffffff" height="50%" width="50%"/>
        <mx:HBox backgroundColor="0x00ffff" height="50%" width="50%"/>
        </mx:VBox>

    <mx:HBox height="50%" width="100%" 
        backgroundColor="0xff0000" backgroundAlpha="0.5" 
        borderColor="0x000000" borderStyle="solid" borderThickness="1"/>

    </mx:VBox>   

    </mx:Canvas>



</mx:WindowedApplication>

Answer 3

I resolved this by making the includeInLayout property of some of these components the same conditional used by their visible property.

Not sure what caused the issue though.