4 Replies Latest reply on Nov 2, 2009 12:35 PM by tofer.curtis

    VBox not scrolling

    Zolotoj Level 3

      I have a VBox with ToggleButtonBar:

      <mx:HBox width="100%" height="50%" backgroundColor="#F5F5F5" id="B2">

      <mx:VBox id="B1" borderStyle="solid" height="100%" width="110" verticalScrollPolicy="on">

           <local:portalDepartments itemClick="departmentClickHandler(event)">





      <mx:ToggleButtonBar direction="vertical"

      xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="buildDepartments()"

      xmlns:s="library://ns.adobe.com/flex/spark" width="100" initialize="init()"

      verticalGap="2" fontSize="9" paddingRight="10" paddingLeft="10" height="100%"

      xmlns:mx="library://ns.adobe.com/flex/halo" labelField="name" buttonHeight="45">



      What's happening is that even B1 will have a vertical scrollbar but something still would push the outer B2 to get a scrollbar and scroll B1.

      What I want is to be able to scroll B1 to show all buttons of ToggleButtonBar.



        • 1. Re: VBox not scrolling
          Zolotoj Level 3

          This is really an annoying problem. Anybody, please help.

          • 2. Re: VBox not scrolling
            mattcom Level 1

            This may or may not help.  I had the same problem with a very tall application.  I ended up finding an autolayout property in the A-Z properties box that I set to true and then I got a scroll bar. So, try adding



            autoLayout=" true"








            to your VBox.

            • 3. Re: VBox not scrolling
              Zolotoj Level 3

              I tried, did not help. The only thing that helps is if I set box's height to some value like 300. Percent does not work.

              • 4. Re: VBox not scrolling

                This is very annoying to me too. The way I got around the problem was to bind the height property to another component. In my case, I wanted the vbox to match the height of the component (a canvas) so:


                <mx:VBox id="labelListBox" height="{this.height}" verticalScrollPolicy="auto" x="0" y="0" width="200" />


                or if you could probably do something a little more complicated (not tested):


                <mx:VBox id="vb1" width="100%" height="100%>

                <mx:HBox id="hb2" height="150" width="100%" />

                <mx:HBox id="hb3" height="{vb1.height - hb2.height}" width="100%/>



                Good Luck,