How to set resize effect for border container using flex 4 or 4.5

Question

Hi friends,
resize effect works fine for one control (image). if want to same for custom comp, then is not working.
below is the code is in custom comp,
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" width="200"
         xmlns:s="library://ns.adobe.com/flex/spark" horizontalAlign="left" verticalAlign="bottom"
         xmlns:mx="library://ns.adobe.com/flex/mx"  xmlns:parsley="http://www.spicefactory.org/parsley"
         xmlns:general="com.presentation.components.general.*">
    <fx:Declarations>
        <parsley:Configure/>
    </fx:Declarations>
    <s:BorderContainer id="bcMain" backgroundColor="#f4f4f4" borderColor="#CDC7C7" borderStyle="solid" borderVisible="true" width="100%">
        <s:layout>
            <s:VerticalLayout horizontalAlign="left" verticalAlign="middle" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
        </s:layout>
        <s:HGroup id="hg1" horizontalAlign="left" verticalAlign="middle" width="100%" gap="5"
                  buttonMode="true" useHandCursor="true" >
            <s:Image id="img1" source="@Embed(source='assets/flex.png" width="15" height="17" cachePolicy="on" cacheAsBitmap="true"/>
            <s:Label text="label 1" textAlign="center"/>
        </s:HGroup>
        <mx:HRule width="100%"/>
        <s:HGroup horizontalAlign="left" verticalAlign="middle" width="100%" gap="10">
            <s:BorderContainer id="bc1" width="35" useHandCursor="true" buttonMode="true"
                      backgroundColor="#f4f4f4" height="40">
                <s:layout>
                    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                </s:layout>
                <s:Image id="img2" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                <s:Label text="label 2" textAlign="center"/>
            </s:BorderContainer>
            <s:BorderContainer id="bc2" width="35" useHandCursor="true" buttonMode="true"
                      backgroundColor="#f4f4f4" height="40">
                <s:layout>
                    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                </s:layout>
                <s:Image id="img3" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                <s:Label text="label 3" textAlign="center"/>
            </s:BorderContainer>
            <s:BorderContainer id="bc3" width="35" useHandCursor="true" buttonMode="true"
                      backgroundColor="#f4f4f4" height="40">
                <s:layout>
                    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                </s:layout>
                <s:Image id="img4" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                <s:Label text="label 4" textAlign="center"/>
            </s:BorderContainer>
        </s:HGroup>
    </s:BorderContainer>
</s:VGroup>
I followed how resize effects works for image control,
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"  duration="2000"/>
        <mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"  duration="2000"/>
<s:Panel title="Resize Effect Example" width="100%" height="100%">
        <s:VGroup width="100%" height="200" horizontalAlign="left" verticalAlign="bottom">           
            <mx:Image id="img" source="@Embed(source='assets/05_ipad.png')" width="10" height="10"/>
            <mx:Button label="Expand" click="expand.end(); expand.play();"/>
            <mx:Button label="Contract" click="contract.end(); contract.play();"/>
        </s:VGroup>
    </s:Panel>
Please help me.

Answer 1

BorderContainer wont resize if the fixed width is specified, if u want to give some minimum width you can use minWidth . Give  Width = "100%", now it will get Resizing capabilities