Can't autoscroll a VBox unless height is explicity set(in pixels) in Flex 3

Question

I have a VBox who dynamically adds and removes children programatically. The height is set to 100% and verticalScrollPolicy=auto.

When a user wants to add another child to that Vbox, I want it to autoscroll to the bottom of the VBox since that is where the child is added.

I've tried every solution I could find online, but no matter what, the verticalScrollPosition and maxVerticalScrollPosition are both ALWAYS equal to 0. Even if I manually scroll to the bottom of the VBox and press a button that alerts these numbers.(Even after 'validateNow()' as well).

The only time I can get these numbers to change programmaticaly is when the VBox height is set in pixels, which I don't want since the children all have varying heights.

Plllease tell me that it's possible to set verticalScrollPosition without hard coding the height in pixels? Am I missing something totally obvious here?

Answer 1

You might not be scrolling the VBox, actually; there's a good chance that if your VBox is contained by another container, like a Canvas or the like, and you're adding items to the VBox as you say you are, it's the Canvas that's doing the scrolling, not the VBox -- in which case the VBox would indeed return 0 for its scroll position.

One way or another, you're right -- you have to set the component's height; even constraint-layout settings (e.g., "bottom='10'", etc.) won't work. But if you can manage to set the height of the VBox, either by binding its dimensions somehow to another control or by setting them explicitly as part of a child's appending/creation process, you should be able to accomplish what you're after.

Here's an example of an AIR app I've mocked up to illustrate the example. Basically it just adds randomly sized boxes to a VBox, and scrolls to the bottom of the VBox after each child gets created.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="250">

    <mx:Script>
     <![CDATA[

      import mx.core.Application;
      import mx.containers.Box;
      import mx.events.FlexEvent;

      private function addItem(h:Number):void
      {
       var b:Box = new Box();
       b.width = 200;
       b.setStyle("backgroundColor", 0xFFFFFF);
       b.height = h;

       // Wait for the component to complete its creation, so you can measure and scroll accordingly later
       b.addEventListener(FlexEvent.CREATION_COMPLETE, b_creationComplete);
       vb.addChild(b);
      }

      private function b_creationComplete(event:FlexEvent):void
      {
       event.currentTarget.removeEventListener(FlexEvent.CREATION_COMPLETE, b_creationComplete);
       vb.verticalScrollPosition = vb.getChildAt(vb.numChildren - 1).y;
      }

     ]]>
    </mx:Script>

    <mx:VBox id="vb" top="10" right="10" left="10" height="{Application.application.height - 80}" verticalScrollPolicy="on" />
    <mx:Button label="Add Item" click="addItem(Math.random() * 100)" bottom="10" left="10" />

</mx:WindowedApplication>

In this case, the height of the VBox is being bound to the height of its containing component (here, just the Application). Everything else should be pretty self-explanatory.

Hope that helps! Post back if you have any questions.

Answer 2

Thanks a lot. Seemed simple, but did not what to set/look for. Worked perfectly. Thanks.