1 Reply Latest reply on Jan 19, 2010 6:32 AM by almeitus

    VBox Scrolling Broken with constraint-based layouts

    SilentChris Level 1

      I was going to report this as a bug, but the bug submission form allows no more than 2000 characters.

       

      Basically, I have the problem where whenever I put a VBox inside another container that is laid out using constraints (e.g. bottom: 50px, left: 50px), then when I add enough children to the VBox to cause overflow, it fails to cause the VBox to scroll and just gets bigger causing the parent to scroll instead.  You can see the attached flex-based example to see it in action.

       

      Does anyone know if there's a way around this problem?

       

      Code below:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:WindowedApplication initialize="addChildren();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="400" showStatusBar="false">
          <mx:Script>
              <![CDATA[
                  import mx.containers.VBox;
                  import mx.controls.Label;
                  import mx.containers.Canvas;
                  internal function addChildren():void {
                      var outerCanvas:Canvas = new Canvas();
                      outerCanvas.percentHeight = 100;
                      outerCanvas.percentWidth = 100;
                     
                      var vb:VBox = new VBox();
                     
                      // With percentage height, the VBox just continues to grow beyond the constraint-based height of the viewstack
                      // The scrollbar that gets added is on the viewstack, not the VBox
                      // Also, the viewstack loses the "bottom: 50px" constraint
                      // If the VBox is a child of outerCanvas, then the VBox container expands and causes a scrollbar on
                      // the *outerCanvas* instead of the VBox itself
      //                vb.percentHeight = 100;
                     
                      // With static height, if the VBox is a child of the viewstack, it maintains its height, but
                      // the viewstack ends up with a scrollbar as if the VBox had grown like with percentage height
                      // If the VBox is a child of the outerCanvas (which is a child of the viewstack), then the
                      // scrolling works (the scroll bar is on the VBox, causing right aligned elements to move over)
                      // and the size of the containers is as expected
                      // Unfortunately, unless we want to manually set heights on app resize, using a static height isn't useful
                      vb.height = 340;
                      vb.percentWidth = 90;
                      vb.setStyle('backgroundColor', '#99ff99');
                     
                      outerCanvas.addChild(vb);
                      this.viewstack1.addChild(outerCanvas);
      //                this.viewstack1.addChild(vb);
                      for (var i:int = 0; i < 30; i++) {
                          var c:Canvas = new Canvas();
                          c.percentWidth = 100;
                          var l:Label = new Label();
                          l.text = "left";

       

                          var r:Label = new Label();
                          r.text = 'right';
                          r.setStyle('right', 0);
                         
                          c.addChild(l);
                          c.addChild(r);
                          vb.addChild(c);
                      }
                  }
              ]]>
          </mx:Script>
          <mx:Canvas top="0" bottom="0" right="50" left="50" backgroundColor="#F4B5B5">
              <mx:ViewStack visible="true" id="viewstack1" backgroundColor="#C88CCD" width="100%" bottom="50" top="0">
              </mx:ViewStack>
              <mx:Canvas width="300" height="50" bottom="0" backgroundColor="#A8A8F0">
              </mx:Canvas>
          </mx:Canvas>
         
      </mx:WindowedApplication>