4 Replies Latest reply on Aug 25, 2006 9:21 AM by peterent

    Controll scrollbar appearance

    rkloppmann
      hi all

      Currently I'm evaluating Flex as the new UI for our CMS. So I'm pretty new to flex and of course do have some questions... :-) and hope that one of you guys can point me in the right direction.

      I have a mxml document which contains a <mx:ViewStack ...> element.
      One of the <mx:Box ..> elements of the viewStack ist pretty long. This obviously causes a scrollbar to appear at lower screen resolutions or smaller windows.
      My problem is that the scrollbar appears according to the <mx:ViewStack ...> element.

      What I would like to have is a scrollbar only for the <mx:Box ..> element (which contains a formular) and not for the whole <mx:ViewStack ...> element.
      I guess the problem is that the <mx:Box ..> has the properties width="100%" height="100%"
      If i change the %-values to concrete values the scrollbar appears only for the <mx:Box ..>.
      But this does not look nice because then the scrollbar sits right in the middle of the screens - which even looks worse on higher resolutions.

      Hope anybody can hel me.
      If it helps I can paste some of the mxml code here..

      Thx!
        • 1. Re: Controll scrollbar appearance
          peterent Level 2
          For this to work you need to have the ViewStack with height="100%" and then create a new container and place your current box into that. Set the new child's height to 100%.

          old way:
          <mx:ViewStack height="100%" ...>
          <mx:Box id="currentBox" ... />

          new way:
          <mx:ViewStack height="100%" ...>
          <mx:Box id="newbox" height="100%">
          <mx:Box id="currentbox" > <!-- no height specified -->
          ...

          What will happen is this: the ViewStack will stretch vertically so it fills its area and will resize according the available real estate (you can also use bottom positioning, too). All of its immediate children should also have height="100%" so they fill up the space too.

          The new box, with height="100%" has as its child the old/current box. It doesn't have a specified height, so it is free to grow. When it becomes larger than the viewable space alloted by its parent, newBox, newBox will get scrollbars (not the current box). That's because the constraint placed on newbox, height="100%" won't allow it to get bigger to accomodate its growing child, so it needs to add scrollbars.

          Caveat: I normally test out what I recommend, but I'm a bit pressed for time right now, so don't hesitate to say that this didn't work :-)
          • 2. Re: Controll scrollbar appearance
            inlineblue Level 1
            If the Box within Box approach doesn't work, then change the outside box (newbox) to a Canvas. I've noticed that the Box components don't respect their width/height constraints when using percentages (they just grow and grow to accommodate their children). The Canvas will definitely constrain itself.
            • 3. Re: Controll scrollbar appearance
              rkloppmann Level 1
              I'm so sorry peterent .... but inlineblue made it :-)

              inlineblue - you are right. It di not work out with box elements, but after using a outer/parent canvas all is fine.

              Your're great guys - thanks a lot.

              I'm sure:...see you soon ;-)
              • 4. Re: Controll scrollbar appearance
                peterent Level 2
                Hey, I can't always be right. Thanks for the support inlineblue.