I wanted to create a bar across the top of my App and since I wanted it across the whole thing, I set the width to 100%. This worked fine until I added charts to my App via actionscript. When I add one chart, it's still ok, but when I add 2 or more charts. The top bar shifts left about 10 pixels and creates a gap on the left. Furthermore, a horizontal scrollbar appears which will not go away.
Try this short, easy application code out to reproduce the problem. It seems like this is a BUG in flex, but if you can figure out a way around it, please let me know. <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" paddingLeft="0" paddingRight="0" horizontalAlign="center" layout="vertical"> <mx:Script> <![CDATA[ import mx.charts.LineChart; import mx.controls.Button; import mx.containers.Panel; private function clickHandler():void{ var myPanel:Panel = new Panel(); myPanel.addChild(new LineChart()); this.addChild(myPanel); } ]]> </mx:Script> <mx:HBox width="100%" backgroundColor="#113887"> <mx:Image source="assets/images/true.jpg"/> <mx:Button label="Add Panel" click="clickHandler()"/> </mx:HBox> </mx:Application>