7 Replies Latest reply on Jul 17, 2008 1:24 PM by ntsiii

    addChild in Actionscript is creating paddingLeft space

    Solerous Level 1
      I create an HBox in my application so I can have a bar across the top of the page with no padding:

      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:custom="components.*" paddingLeft="0" paddingRight="0" horizontalAlign="center"
      layout="vertical" p>

      <mx:HBox width="100%" backgroundColor="#113887">
      <mx:Image source="images/mLogo.gif"/>
      </mx:HBox>

      But later on, I dynamically add more elements via Actionscript:

      this.addChild(myPanel);

      For some reason this moves my HBox over about 5-10 pixels creating "padding" on the left and also creates a horizontal scrollbar on the bottom of the page (which is unnecessary to see the items on the page but which you cannot get rid of no matter how wide you expand the window to be)

      How do I fix this?
        • 1. Re: addChild in Actionscript is creating paddingLeft space
          Gregory Lafrance Level 6
          Hmmm... In this code I'm not seeing the problem:
          • 2. Re: addChild in Actionscript is creating paddingLeft space
            EDendramis Level 1
            set your horizontalGap="0" (or it might be verticalGap, i never remember)
            • 3. Re: addChild in Actionscript is creating paddingLeft space
              Solerous Level 1
              well horizontalGap and verticalGap didn't work

              And Greg, you're right- I tried your code and it doesn't move anything like it does in mine. So here is a more detailed excerpt from where my code adds the panel. I am using a custom extended component of panel but all I set inside there are a color. The only thing I can find in the code that might be throwing it off is the Binding, but I'm not sure, that's just a guess...

              <!-- custom Panel -->
              <mx:Panel xmlns:mx=" http://www.adobe.com/2006/mxml" resizeEffect="Resize" styleName="gradientBgrd">
              <mx:Style>
              .gradientBgrd {
              borderStyle: applicationControlBar;
              }
              </mx:Style>
              </mx:Panel>

              // here is the actionscript where the code is added
              public function makeChart(genericChart:CartesianChart, genericLegend:Legend, chartPanel:ChartPanel, chart:ChartObject):void {

              var axisList:ArrayCollection = chart.getAxisList();
              var renderers:ArrayCollection = new ArrayCollection();
              var seriesArray:ArrayCollection = new ArrayCollection();
              var hAxis:DateTimeAxis = new DateTimeAxis();

              // Define vertical axis
              var vAxis:LinearAxis = new LinearAxis();
              vAxis.autoAdjust = true;
              vAxis.baseAtZero = false;

              for (var i:int=0; i<axisList.length; i++) {
              var axis:AxisObject = axisList.getItemAt(i) as AxisObject;
              if (axis.getID() == "x Axis") {
              // more formating of the horizontal axis
              var ar:AxisRenderer = new AxisRenderer();
              ar.axis = hAxis;
              ar.placement = "bottom";
              ar.setStyle("canDropLabels", "true");
              ar.setStyle("tickPlacement", "none");
              genericChart.horizontalAxisRenderers = [ar];
              genericChart.horizontalAxis = hAxis;
              }
              else {
              var placement:String = axis.getLocation();
              genericChart.verticalAxis = vAxis;
              // define series
              var lineSeries:LineSeries = new LineSeries();
              BindingUtils.bindProperty(lineSeries, "dataProvider", axis, "points");
              lineSeries.verticalAxis = vAxis;
              lineSeries.horizontalAxis = hAxis;
              lineSeries.displayName = axis.title;
              lineSeries.setStyle("lineStroke", stroke);
              lineSeries.setStyle("fill",stroke.color);
              lineSeries.xField="point1";
              lineSeries.yField="point2";
              seriesArray.addItem(lineSeries);

              // more formatting of the axis
              var axr:AxisRenderer = new AxisRenderer();
              axr.axis = vAxis;
              axr.setStyle("color", stroke.color);
              axr.placement = placement;
              axr.setStyle("canDropLabels", "true");

              renderers.addItem(axr);
              }
              }
              genericChart.series = seriesArray.toArray();//.reverse();
              if (axisList.length <= 3) {
              genericChart.verticalAxisRenderers = renderers.toArray();//.reverse();
              }
              genericChart.percentWidth = 97;
              genericChart.percentHeight = 100;
              genericChart.seriesFilters = [];
              genericLegend.dataProvider = genericChart;
              genericLegend.direction = "horizontal";
              BindingUtils.bindProperty(genericLegend, "width", chartPanel, "width");
              genericChart.showDataTips = true;
              chartPanel.title = chart.getName();
              chartPanel.horizontalScrollPolicy = "off";
              chartPanel.addChild(genericChart);
              this.addChild(chartPanel);
              }
              • 4. Re: addChild in Actionscript is creating paddingLeft space
                Gregory Lafrance Level 6
                I'm not lazy, but I prefer to see simplified yet "complete" sample code that reproduces the problem, with a small set of sample data, to just drop in FB and test. Makes things easier.
                • 5. Re: addChild in Actionscript is creating paddingLeft space
                  ntsiii Level 3
                  It is the panel that is expanding the app and creating the scroll bar.

                  Because you have specified, "horizontalAlign="center", and have not set the HBox width to 100%, the HBox is centering on the App and appears to be padded.

                  Set your chart width to a specific size, (very small) to see if the scrollbars go away. Then figure out the next step.

                  Tracy
                  • 6. addChild in Actionscript is creating paddingLeft space
                    Solerous Level 1
                    Tracy, the HBox is set to 100% and in fact displays properly at first until I add the charts.

                    Furthermore, I've noticed that when I add ONE chart, it doesn't shift the elements, but when I add TWO (or more) charts, the shift and 'gap' appears.

                    After commenting out different parts of the code, I've determined that this is not anything wrong in my code. It would seem to be a BUG in flex. Something is wrong with LineChart. In fact, if you replace Greg's actionscript method above with the following, you can reproduce this error:

                    • 7. Re: addChild in Actionscript is creating paddingLeft space
                      ntsiii Level 3
                      Sorry, I see the HBox is 100%. This is more likely a container rendering/measurement issue than a bug with the chart.

                      Maybe call invalidateDisplayList() after addChild?

                      Tracy