14 Replies Latest reply on Jul 30, 2009 1:35 PM by Cr99

    gap appears when components added in a loop

    Cr99 Level 1

      This is a puzzling error and I was wondering if anyone knows how to fix it.  If you add a component to your application like a simple HBox:

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" paddingLeft="0" paddingRight="0" backgroundColor="#597FA6">

       

      <mx:HBox width="100%" backgroundColor="#990000"/>

       

      and then add a bunch of components via a method you get a gap of about 20 pixels one the left.  Your HBox even though it says width 100% no longer spans the entire application.  In addition, you get a horizontal scrollbar when none is needed.  It's like the Application can't calculate the width correctly.  How can this be fixed?

       

      <mx:HTTPService id="reportList" result="initializeBrowser(event)" useProxy="false"

      method="GET" showBusyCursor="true" url="{dbURL}"/>

       

      // data array is supplied via reportList

      public function init(evt:ResultEvent):void {

      var label:Label = new Label();

      label.text = "REPORT LIST";

      label.setStyle("color", 0xFFFFFF);

      label.setStyle("fontSize", 18);

      label.setStyle("fontWeight", "bold");

      this.addChild(label);

      var rule:HRule = new HRule();

      rule.width = 300;

      this.addChild(rule);

       

       

      var arr:ArrayCollection = new ArrayCollection();

      arr = reportList.lastResult.system.data;

       

      // this code causes the gap to appear

      for (var i:int=0; i<arr.length; i++) {

      var link:LinkButton = new LinkButton();

      link.label = arr[i].name;

      link.id = arr[i].id;

      link.addEventListener(MouseEvent.CLICK, showReport);

      link.setStyle("color", 0xFFFFFF);

      this.addChild(link);

      }

        • 1. Re: gap appears when components added in a loop
          Kevin Schmidt Level 1

          Correct me if I'm wrong, but it looks like you are adding the elements to the main application via this.addChild, rather than the HBox as it has no "id" attribute.

           

          Do you want to add them to the main application or do you want them added to the HBox?

          • 2. Re: gap appears when components added in a loop
            Cr99 Level 1

            yes, I wanted to add them to the main application.  I've tried creating an empty HBox and adding the components to that, but it produces the same gap either way I do it.

            • 3. Re: gap appears when components added in a loop
              Kevin Schmidt Level 1

              Try adding them to an HBox with these attributes

               

              <mx:HBox

                   width="100%"

                   backgroundColor="#990000"

                   horizontalGap="0"

                   horizontalScrollPolicy="off"

                   />

               

              Also, make sure for some reason you aren't creating an empty item for the first item.

              • 4. Re: gap appears when components added in a loop
                Gregory Lafrance Level 6

                If this post answers your question or helps, please mark it as such.

                 

                Don't forget there will be paddingLeft and paddingRight of 10px by default, and horizontalGap of 10px by default as well (default might be 6px or something, but you get the idea).

                 

                So if the padding and gaps are undesireable, you must remove them by setting the style properties, and in AS you do that with setStyle().

                • 5. Re: gap appears when components added in a loop
                  Cr99 Level 1

                  Thanks for the tips.  The gap does indeed go away when the components are added to an HBox, but I actually need them to be arranged vertically.  So when I add them to the component testBox:

                   

                  <mx:VBox id="testBox"

                       width="100%"

                       horizontalGap="0" horizontalAlign="center"

                        verticalGap="0" verticalScrollPolicy="off"

                       horizontalScrollPolicy="off"

                       />

                   

                  the gap is still there.

                   

                  Also, I do have paddingLeft and paddingRight set to 0 for the Application.  I also set horizontalGap="0" in the Application tag.  These did not have any affect.

                  • 6. Re: gap appears when components added in a loop
                    Gregory Lafrance Level 6

                    How about paddingLeft, paddingTop, etc. for the app, the VBox, and for the components added to VBox.

                     

                     

                    If this post answers your question or helps, please mark it as such.

                    • 7. Re: gap appears when components added in a loop
                      Kevin Schmidt Level 1

                      Do me a favor and post all your code and a screen shot of what's happening.

                      • 8. Re: gap appears when components added in a loop
                        Cr99 Level 1

                        I did try setting the gaps and padding everywhere I could to 0 but nothing happens.  One thing I should reiterate, if I comment out the loop with the this.add(linkButton) it draws normally.  I can do an infinite number of this.addChild(element) calls with no ill effect but it just seems to not like adding them via a loop.

                         

                        Here is the full app code:

                         

                        <?xml version="1.0" encoding="utf-8"?>

                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexlib="flexlib.*" height="100%"

                        xmlns:yahoo="com.yahoo.astra.mx.controls.*" xmlns:net="flash.net.*" paddingLeft="0" paddingRight="0" backgroundColor="#597FA6"

                        creationComplete="init()" pageTitle="Momentum" xmlns:code="flexlib.*">

                         

                        <mx:Script>

                        <![CDATA[

                        import mx.controls.LinkButton;

                        import mx.controls.LinkBar;

                        import mx.controls.HRule;

                        import mx.collections.ArrayCollection;

                        import mx.rpc.events.ResultEvent;

                         

                         

                        [Bindable]

                        public var dbURL:String = "http://localhost:8888/app/signal";

                        [Bindable]

                        public var momentumURL:String = "http://localhost:8888/app/serv";

                          

                        //////////////////////////////////////////////////////////////////////////

                         

                        public function loadList():void {

                           var password:String = "sns";

                           var user:String = "sns_reports";

                           var params:Object = {};

                           var s:String = 'ReportList';

                        params[s] = s;

                        params["password"] = password;

                        params["user"] = user;

                        reportList.send(params);

                        }

                         

                        //////////////////////////////////////////////////////////////////////////

                         

                        public function initializeBrowser(evt:ResultEvent):void {

                        this.removeChild(flowLayout);

                        var label:Label = new Label();

                        label.text = "REPORT LIST";

                        label.setStyle("color", 0xFFFFFF);

                        label.setStyle("fontSize", 18);

                        label.setStyle("fontWeight", "bold");

                        this.addChild(label);

                        var rule:HRule = new HRule();

                        rule.width = 300;

                        this.addChild(rule);

                         

                        var arr:ArrayCollection = new ArrayCollection();

                        arr = reportList.lastResult.system.data;

                         

                        for (var i:int=0; i<arr.length; i++) {

                        var link:LinkButton = new LinkButton();

                        link.label = arr[i].name;

                        link.id = arr[i].id;

                        link.addEventListener(MouseEvent.CLICK, showReport);

                        link.setStyle("color", 0xFFFFFF);

                        this.addChild(link);

                        }

                        }

                         

                         

                        ////////////////////////////////////////////////////////////////////////

                         

                        public function showReport(e:MouseEvent):void {

                        var id:String = String(e.currentTarget.id);

                        navigateToURL(new URLRequest(momentumURL+'?reportID='+id), "_blank")

                        }

                         

                         

                        /////////////////////////////////////////////////////////////////////////

                         

                                    private function init():void {

                                    // disable home link

                                    imgLogoHighlight.useHandCursor = false;

                                    imgLogoHighlight.buttonMode = false;

                                    imgLogoHighlight.toolTip = "";

                                    this.fadeIn.alphaFrom = 1.0;

                                    this.fadeOut.alphaTo = 1.0;

                                    imgLogo.useHandCursor = false;

                                    imgLogo.buttonMode = false;

                                    imgLogo.toolTip = "";

                                    imgLogo.removeEventListener(MouseEvent.CLICK, navigateToURL);

                                    loadList(); // start report browser

                                    }

                         

                        /////////////////////////////////////////////////////////////////////////

                        public function logo_rollOver(event:MouseEvent):void {

                        imgLogoHighlight.visible = true;

                        }

                         

                        /////////////////////////////////////////////////////////////////////////

                         

                        public function logo_rollOut(event:MouseEvent):void {

                        imgLogoHighlight.visible = false;

                        }

                         

                        /////////////////////////////////////////////////////////////////////////

                         

                        private function clickHome(event:MouseEvent):void {

                        navigateToURL(new URLRequest(momentumURL), "_self");

                        }

                         

                        ]]>

                        </mx:Script>

                         

                        <mx:Style source="chartStyle.css"/>

                         

                        <mx:Fade id="fadeIn" duration="1500" alphaFrom="0.0" alphaTo="1.0" />

                        <mx:Fade id="fadeOut" duration="1500" alphaFrom="1.0" alphaTo="0.0" />

                         

                        <!-- This gets shoved left -->

                        <mx:HBox width="100%" backgroundColor="#113887">

                        <mx:Canvas width="100%" height="100%">

                        <mx:Canvas x="0" y="0" toolTip="Momentum Report List">

                        <mx:Image id="imgLogo" source="images/mLogo.gif" 

                        buttonMode="true" useHandCursor="true" x="0" y="0" rollOverEffect="{fadeOut}" rollOutEffect="{fadeIn}"

                        rollOver="logo_rollOver(event);" rollOut="logo_rollOut(event);" />

                        <mx:Image id="imgLogoHighlight" source="images/mHighLightLogo.gif" visible="false"

                        buttonMode="true" useHandCursor="true"

                        x="0" y="0" showEffect="{fadeIn}" hideEffect="{fadeOut}"/>

                        </mx:Canvas>

                         

                        <mx:HBox horizontalAlign="right" height="100%" verticalAlign="middle" width="100%" paddingRight="20" x="0" y="0">

                         

                        <mx:Button id="pdfButton" color="#000000" visible="false" label="Save as PDF"/>

                        </mx:HBox>

                        </mx:Canvas>

                        </mx:HBox>

                         

                        <!-- Area for global date interface -->

                        <mx:HBox verticalAlign="top">

                        <mx:VBox id="reportDates" visible="false"/>

                        <mx:Button id="reload" label="Reload" visible="{reportDates.visible}"/>

                        </mx:HBox>

                         

                        <mx:HBox id="metrics">

                        <mx:Label id="qPerform" color="white" visible="true"/>

                        <mx:Label id="tPerform" color="white" visible="false"/>

                        </mx:HBox>

                         

                        <mx:VBox width="{this.width}" horizontalScrollPolicy="off"  height="100%" creationPolicy="queued"

                        paddingLeft="20" paddingRight="20" paddingBottom="20" paddingTop="20" id="flowLayout"

                        clipContent="false" horizontalAlign="center"/>

                         

                        <mx:VBox id="queryBox"/>

                         

                        <mx:HTTPService id="reportList" result="initializeBrowser(event)" useProxy="false"

                        method="GET" showBusyCursor="true" url="{dbURL}"/>

                         

                        </mx:Application>

                        • 9. Re: gap appears when components added in a loop
                          Cr99 Level 1

                          Well, that is the code, but since you probably don't want to mess with the HTTPservice stuff, you can mimc the problem if you just replace the Application tag and the initializeBrowser method with this:

                           

                           

                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexlib="flexlib.*" height="100%"

                          xmlns:yahoo="com.yahoo.astra.mx.controls.*" xmlns:net="flash.net.*" paddingLeft="0" paddingRight="0" backgroundColor="#597FA6"

                          creationComplete="initializeBrowser()" pageTitle="Momentum" xmlns:code="flexlib.*">

                           

                          //////////////////////////////////////////////////////////////////////////

                           

                          public function initializeBrowser():void {

                           

                          var label:Label = new Label();

                          label.text = "REPORT LIST";

                          label.setStyle("color", 0xFFFFFF);

                          label.setStyle("fontSize", 18);

                          label.setStyle("fontWeight", "bold");

                          this.addChild(label);

                          var rule:HRule = new HRule();

                          rule.width = 300;

                          this.addChild(rule);

                           

                          var arr:ArrayCollection = new ArrayCollection();

                          arr = reportList.lastResult.system.data;

                           

                          for (var i:int=0; i<arr.length; i++) {

                          this.addChild(new Checkbox());

                          }

                          }

                           

                           

                          You can also get rid of the image links as well.  They are not needed to see the problem.
                          • 10. Re: gap appears when components added in a loop
                            Cr99 Level 1

                            Well, after much fiddling around, I've found that the problem only occurs when there are enough elements in the application to cause vertical scroll bars to appear.  Here is a screen shot of the problem:

                             

                            Momentum.jpg

                             

                            In this screenshot I was experimenting with checkboxes to see if maybe the problem was with linkbuttons.  The aquamarine rectangle is the HBox.  I'm going to look into perhaps getting rid of some more elements in the application to see why this resize problem is showing up.

                            • 11. Re: gap appears when components added in a loop
                              buabco Level 1

                              From what you showed I think your problem is with the green rectangle on top of your display, I bet thats an image of an specific size, try making it smaller, since when the scroll bars appear the display area does get smaller and probably this is what is making the horizaontal scroll bar appear.

                               

                              The gap itself is a mistery, but I bet there is a gap on ether size of the image.

                              • 12. Re: gap appears when components added in a loop
                                Cr99 Level 1

                                Thanks for the input.  Unforunately, the problem is not with the image.  I have stripped everything out and the problem is still here.  You can re-create it with this very small amount of code:

                                 

                                 

                                <?xml version="1.0" encoding="utf-8"?>

                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                horizontalGap="0" paddingLeft="0" paddingRight="0" backgroundColor="gray">

                                 

                                <!-- This HBox gets shoved left -->

                                <mx:HBox width="100%" height="100" backgroundColor="red" />

                                <mx:VBox width="100" height="400" backgroundColor="green"/>

                                </mx:Application>

                                 

                                 

                                Just shrink your browser window and you'll see the gap show up.

                                • 13. Re: gap appears when components added in a loop
                                  buabco Level 1

                                  Ok by taking your code I made some experiments and have come up with some conclusions:

                                   

                                  1.- This sure is a bug, and has something to do with the scrollbars appearing, this gap doesn't show up if you use the verticalScrollPolicy set to something diferente than auto.

                                   

                                  2.- There seems not to be a direct work arround other than setting the verticalScrollPolicy to off or on.

                                   

                                  No to make things wierder:

                                   

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalScrollPolicy="off"
                                  horizontalGap="0" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="gray">

                                   

                                  <!-- This HBox gets shoved left -->
                                  <mx:VBox width="100%" height="100%" verticalScrollPolicy="auto">
                                      <mx:HBox width="100%" height="100" backgroundColor="red" />
                                      <mx:VBox width="100%" height="400" backgroundColor="green"/>
                                  </mx:VBox>
                                  </mx:Application>

                                   

                                  ScrollBars from VBox never show up....

                                  • 14. Re: gap appears when components added in a loop
                                    Cr99 Level 1

                                    I would agree that it seems to be a bug.  Odd that I couldn't find more about this in searching the web.  What I decided to do since my applications will almost always need to scroll vertically anyway was to just turn on the vertical scrollbar always:

                                     

                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalScrollPolicy="on">

                                     

                                    And that seems to make the elements behave properly.  It's not the best solution, but it will have to do for now.  Hopefully this will get fixed in Flex 4.  Thanks for all the help.