5 Replies Latest reply on Feb 19, 2010 6:10 PM by vividmac87

    VBox Scrollbar Issue

    vividmac87

      Hello,

       

      I thought I had my problem fixed from a previous post, but when I started adding other elements I ran into an issue. What I am trying to accomplish is an accordion that dynamically generates child VBox components. My original problem was that I needed a scrollbar to appear beside the accordion, but now my problem is that I need the scrollbar to apply specifically to the accordion. I have a button below the accordion that I do not want to be effected by the scrollbar. See the code below:

       

       

      This is what the above code publishes:

       

      screen1.jpg

       

      As you can see from this image the button appears at the very bottom of the scrollbar. This next image shows the desired functionality that I am aiming for:

       

      screen2.jpg

      From this picture you can see that I want the scrollbar to apply only for the accordion and not for the button. I tried messing around with the verticalScrollPolicy property on the VBox containing the accordion, but I cannot seem to get this to work.

       

      Any help would be greatly appreciated.

       

      Thanks,

      Brian

        • 1. Re: VBox Scrollbar Issue
          vividmac87 Level 1

          Sorry, my code didnt get posted along with the message for some reason. Here it is again.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
                <mx:Script>
              <![CDATA[
                  import mx.containers.VBox;
               
                    private function init():void{
                      for(var a:uint=0;a<100;a++){
                            var vb:VBox = new VBox();
                            vb.label = "MyVBox" + a;
                            vb.width = 200;
                            vb.height = 100;
                            acc.addChild(vb);
                      }
                    }
              ]]>
                </mx:Script>
               <mx:HDividedBox width="100%" height="100%">
                  <mx:VBox width="50%" height="100%"/>
                  <mx:VDividedBox width="50%" height="100%">
                        <mx:VBox width="100%" height="50%"/>
                        <mx:VBox width="100%" height="50%">
                            <mx:VBox width="100%" height="75%">
                                <mx:Accordion id="acc" width="100%" height="50%"/>
                            </mx:VBox>
                            <mx:Button label="Button" width="100%" height="25%" />    
                        </mx:VBox>
                  </mx:VDividedBox>
                </mx:HDividedBox>
          </mx:WindowedApplication>

          • 2. Re: VBox Scrollbar Issue
            Flex harUI Adobe Employee

            Try:

                              <mx:VBox width="100%" height="75%"

            verticalScrollPolicy="on">

                                  <mx:Accordion id="acc" minHeight="0" width="100%"

            height="50%"/

            1 person found this helpful
            • 3. Re: VBox Scrollbar Issue
              vividmac87 Level 1

              I tried the above code but it did not solve the problem. Here is the result:

               

              Screen shot 2010-02-19 at 6.23.18 PM.png

               

              As you can see this causes the children of the accordion to overlap. I messed around with the values of minHeight, that didnt work, and then I tried maxHeight, but that did not work as well. At least the above image shows the button at the bottom, I'm assuming that's only because the children of the accordion are not pushing it down.

               

              I have already tried messing around with verticalScrollPolicy before, but could not get it to work. For some reason the scrollbar does not have a handle and it is greyed out.

               

              Any other suggestions that come to mind?

               

              Thanks for your help.

              • 4. Re: VBox Scrollbar Issue
                Flex harUI Adobe Employee

                Ah, yes, that's a good point.  MinHeight=0 is probably too small.

                 

                Try a simpler case with just one or two Vboxes and the accordion and the

                button and fewer %'s other than 100%.

                 

                You might be better off wrapping the Accordion in its own container

                 

                <mx:Vbox height="100%">

                    <mx:Canvas verticalScrollPolicy="on" height="100%" minHeight="0">

                        <mx:Accordion>

                    </mx:Canvas>

                    <mx:Button>

                </mx:Vbox>

                 

                 

                In theory which ever container has minHeight=0 will sprout scrollbars.

                • 5. Re: VBox Scrollbar Issue
                  vividmac87 Level 1

                  Wow harUI that worked perfectly! Putting a minHeight=0 + height="number" on a parent container for the accordion gave me a scrollbar on that container.

                   

                  Thanks a lot!

                  -Brian