horizontalCenter parameter discarded in flex 4 vgroup

Question

Hi,

No matter what value I put in the horizontalCenter property of the "Browse" button, it just follows the horizontalAlign property of the VGroup. Why is that ?

Thanks

<s:Group width="100%" height="100%" left="0" right="0" top="0" bottom="0">
    <s:Panel id="mainPanel" title="File uploader" width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent> <s:Label text="foo"/> </s:controlBarContent>
        <mx:HDividedBox width="100%" height="100%">
            <s:VGroup width="25%" height="100%" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
                <s:TextArea width="100%" height="100%" />
                <s:Button label="Browse" horizontalCenter="30"/>
            </s:VGroup>
            <s:TextArea width="100%" height="100%" />
        </mx:HDividedBox>
    </s:Panel>
</s:Group>

Answer 1

The VGroup in Flex 4 uses spark.layouts.VerticalLayout which doesn't take into account horizontalCenter/verticalCenter :/. I don't like that myself.

But since your VGroup's child TextArea is 100% width/height, you can use the VerticalLayout/VGroup horizontalAlign property: horizontalAlign="center". That works:

<s:Group width="100%" height="100%" left="0" right="0" top="0" bottom="0">
    <s:Panel id="mainPanel" title="File uploader" width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Label text="foo"/>
        </s:controlBarContent>
        <mx:HDividedBox width="100%" height="100%">
            <s:VGroup width="25%" height="100%" paddingLeft="10" horizontalAlign="center" paddingRight="10" paddingTop="10" paddingBottom="10">
                <s:TextArea width="100%" height="100%" />
                <s:Button label="Browse" horizontalCenter="30"/>
            </s:VGroup>
            <s:TextArea width="100%" height="100%" />
        </mx:HDividedBox>
    </s:Panel>
</s:Group>

Answer 2

Thanks for your answer !