Hi,
I have a re-sizable panel which has a accordion in it. Accordion has 3 children and each of them are a bubble chart on a canvas. When the panel is first created and each child is viewed the bubble chart size is as desired, 100% of the canvas. Now if I resize the Panel on the selected child resizes - if any of the unselected child is selected it is visible that the chart is resizing after the selected accordion child is totally scrolled open. I do want to resize the children of the accordion when the panel is resized; not after the accordion child is selected. How do I do that? Here is my code: *************************************************************** *************************************************************** <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var expensesAC:ArrayCollection = new ArrayCollection( [ { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 }, { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 }, { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 }, { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 }, { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]); ]]> </mx:Script> <mx:SolidColor id="sc1" color="blue" alpha=".3"/> <mx:Stroke id="stroke1" color="blue" weight="1"/> <mx:states> <mx:State name="small"> <mx:SetProperty target="{panel1}" name="width" value="402"/> <mx:SetProperty target="{panel1}" name="height" value="302"/> <mx:SetProperty target="{button1}" name="label" value="Large"/> <mx:SetEventHandler target="{button1}" name="click" handler="currentState=''"/> </mx:State> </mx:states> <mx:Panel x="67" y="61" width="893" height="549" id="panel1" resizeEffect="Resize"> <mx:Accordion x="0" y="0" width="100%" height="100%"> <mx:Canvas label="A" width="100%" height="100%" backgroundColor="#BBD42E"> <mx:BubbleChart id="bubblechart1" height="100%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" maxRadius="20" dataProvider="{expensesAC}"> <mx:series> <mx:BubbleSeries displayName="Profit/Expenses/Amount" xField="Profit" yField="Expenses" radiusField="Amount" fill="{sc1}" stroke="{stroke1}" /> </mx:series> </mx:BubbleChart> </mx:Canvas> <mx:Canvas label="B" width="100%" height="100%" backgroundColor="#81C933"> <mx:BubbleChart id="bubblechart2" height="100%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" maxRadius="20" dataProvider="{expensesAC}"> <mx:series> <mx:BubbleSeries displayName="Profit/Expenses/Amount" xField="Profit" yField="Expenses" radiusField="Amount" fill="{sc1}" stroke="{stroke1}" /> </mx:series> </mx:BubbleChart> </mx:Canvas> <mx:Canvas label="C" width="100%" height="100%" backgroundColor="#71BD56"> <mx:BubbleChart id="bubblechart3" height="100%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" maxRadius="20" dataProvider="{expensesAC}"> <mx:series> <mx:BubbleSeries displayName="Profit/Expenses/Amount" xField="Profit" yField="Expenses" radiusField="Amount" fill="{sc1}" stroke="{stroke1}" /> </mx:series> </mx:BubbleChart> </mx:Canvas> <mx:Canvas label="D" width="100%" height="100%" backgroundColor="#0FBF55"> <mx:BubbleChart id="bubblechart4" height="100%" width="100%" paddingRight="5" paddingLeft="5" showDataTips="true" maxRadius="20" dataProvider="{expensesAC}"> <mx:series> <mx:BubbleSeries displayName="Profit/Expenses/Amount" xField="Profit" yField="Expenses" radiusField="Amount" fill="{sc1}" stroke="{stroke1}" /> </mx:series> </mx:BubbleChart> </mx:Canvas> </mx:Accordion> </mx:Panel> <mx:Button x="267" y="637" label="Small" id="button1" click="currentState='small'"/> </mx:Application> ************************************************************** **************************************************************
