Question

Hello i have the following flex code:

<mx:VBox verticalGap="0">
    <mx:ProgressBar id="bar" labelPlacement="top" visible="true" verticalGap="0" 
                    color="0x323232" label="{data.packageId}" direction="right" mode="manual"           fontWeight="bold" trackHeight="10" width="400" bottom="-4"/>
    <mx:ProgressBar id="subbar" visible="true" width="400" label="{data.status}" verticalGap="0"
            borderColor="#c70000" direction="right" enabled="true" top="-5"
            indeterminate="false" labelPlacement="bottom" maximum="100" minimum="0"
            mode="manual" themeColor="#c70000"  trackHeight="3"/>
</mx:VBox>

Right now these 2 elements are positioned under eachother, what i want is that the bottom progressbar is positioned at the bottom of the top progressbar. In other words, to bottom of the top progressbar and the bottom of the bottom progressbar should have the same y value. Any help would be appreciated.

Answer 1

Instead of a VBox that will force things to not overlap, use a Group. Not sure what version of Flex you are using, but lets assume 4.0 or 4.5:

<s:Group>
    <mx:ProgressBar id="bar" labelPlacement="top" visible="true" verticalGap="0" color="0x323232" label="{data.packageId}" direction="right" mode="manual" fontWeight="bold" trackHeight="10" width="400" bottom="-4"/>
    <mx:ProgressBar id="subbar" visible="true" width="400" label="{data.status}" verticalGap="0" borderColor="#c70000" direction="right" enabled="true" top="-5" indeterminate="false" labelPlacement="bottom" maximum="100" minimum="0" mode="manual" themeColor="#c70000"  trackHeight="3"/>
</s:Group>

From there you will have a much easier time with positioning.