Text is always on top, even on Overlapped layer

Hi,

I'm having trouble setting up our MyGui screens. Any time any two controls with text overlap, the text is always drawn on top.

Our observation is that if you set the Align property on a control that is not the child of another control (that is, at the root level), then the align property is ignored, so we've settled on a pattern that works well for us. That pattern is to create a 1920x1080 full-screen canvas, and then make all of the controls in our screen children of that control, setting their Align appropriately so that it scales down (or up) properly with resolution. Then in code when we load the screen, we resize the root canvas to the size of the viewport and all of the controls get placed properly.

Thus far we have avoided having any two items overlapping, but we want now to have some movable MyGui windows, which can possibly overlap. In order to set up proper default sizing for these Windows, we place them inside of the root Canvas and set their Align value as appropriate. By default the windows don't overlap, but as soon as you move the windows on top of each other, the text is always on top.

I found this:
http://www.ogre3d.org/addonforums/viewtopic.php?f=17&t=7523

But the recommended fix (setting the windows to be on an Overlapped layer) doesn't fix it for our situation.

Here is an example that demonstrates our setup:

<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Layout" version="3.2.0">
<Widget type="Canvas" skin="Canvas" position="0 0 1920 1080" align="Stretch" layer="Overlapped">
<Widget type="Window" skin="WindowCS" position="1454 14 454 1036" align="Right VStretch">
<Property key="Caption" value="dfgdfgdfgdfg"/>
<Widget type="Button" skin="Button" position="130 130 180 175">
<Property key="Caption" value="dfgdfgdfgdfg"/>
</Widget>
</Widget>
<Widget type="Window" skin="WindowCS" position="20 14 1415 601" align="HStretch Top">
<Property key="Caption" value="dfgdfgdfgdfg"/>
<Widget type="Button" skin="Button" position="140 100 175 185">
<Property key="Caption" value="dfgdfgdfgdgfdfg"/>
</Widget>
</Widget>
<Widget type="Button" skin="Button" position="20 1010 264 50" align="Left Bottom">
<Property key="Caption" value="Button Text"/>
</Widget>
</Widget>
</MyGUI>


By default those windows aren't overlapped, but if you move any of the controls over any of the others, their text will always get drawn on top.

So the question now is: How can I make two controls that are not at the root level overlap each other properly?

Thanks,
- Guy

Edit: Fixed example to use Right VStretch instead of Stretch

<Widget type="Window" skin="WindowCS" style="Overlapped" position="1454 14 454 1036" align="Right VStretch">

Hey, that worked! Thanks very much. Boy, talk about a hidden feature.

(Sorry it's taken so long to respond...I had given this question up as abandoned after a while! )

Whoops. Correction. That seemed to work, but when I add that flag, I can no longer interact with any element in the window after the first one. I click on a button, check a box, switch a combo box entry, whatever I do, the window immediately becomes completely non-responsive to all input.

Any thoughts?

Thanks,

- Guy