8 Replies Latest reply on Feb 9, 2010 4:38 PM by Paul The Lad

    Scroller doesn't seem to work as expected

    Rob M Love

      I would appreciate if someone can enlighten me as to how this should work. I've spent the last few frustrating hours trying to get a portion of an application to scroll when the window size of the browser is not large enough to show it. My component looks something like the following.

       

      <mycomp>

      <rect>

      pretty stuff here

      </rect>

       

      <group>

      this group contains a menu

      </group>

      <scroller>

      <group id=" this is the group I wish to scroll if the browser does not accommodate its size .">

      <mx:form/>

      </group>

      </scroller>

       

      </mycomp>

       

      Obviously this could be my simple ignorance or maybe there is an issue. I have tried this multiple ways I thought that by setting an explicit height and width of the group I wish to scroll then the scroller would initiate with the browser did not accommodate viewable area.

       

      Can someone please shed some light on this for me?

       

      Thank you,

      Rob

        • 1. Re: Scroller doesn't seem to work as expected
          Shongrunden Adobe Employee

          Try setting the width of the scroller to 100% like this:

           

          <s:Application
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark">

           

            <s:Scroller width="100%" height="100">
              <s:Group id="myContent">
                <s:Button label="large content" width="2000" height="200" />
              </s:Group>
            </s:Scroller>

           

          </s:Application>

           

          This will wrap scroll bars around the myContent Group when the browser window isn't large enough to show it all.

           

          Note: When you specify a size on a Scroller make sure the Group inside of that Scroller does not have a size defined.

           

          If the Scroller isn't a direct child of the Application, like it is in the example above, then make sure each container on the way up also has a width of 100% set.

           

          Is that what you are looking for?

          • 2. Re: Scroller doesn't seem to work as expected
            Rob M Love Level 1

            Ok so this is what I have.

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/halo" >
                <s:layout>
                    <s:BasicLayout/>
                </s:layout>
                <fx:Metadata>
                    Some events
                </fx:Metadata>
               
                <fx:Script>
                    <![CDATA[
                        cool scripts
                    ]]>
                </fx:Script>

             

                <s:states>
                    <s:State name="State1"/>
                </s:states>

             


               
                <s:Rect left="0" right="0" top="0" bottom="0">
                    pretty stuff       
                </s:Rect>
                <s:Scroller width="100%" height="100%">

             

                    <s:Group>
                        <mx:Form id="newInstrumentForm" x="0" y="0" width="550" height="635">
                           
                        </mx:Form>
                    </s:Group>

             

                </s:Scroller>
                <fx:Declarations>
                   
                </fx:Declarations>
            </s:Group>

             

            Every conatainer/group out to the App is set to 100% and no scroll bars appear when the screen is to small.

             

            So what am I missing?

            • 3. Re: Scroller doesn't seem to work as expected
              David_F57 Level 5

              I think this is what you are trying to do, if the browser is made smaller the skinnable container scrolls

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="100">

              <s:layout>

              <s:BasicLayout/>

              </s:layout>

              <s:Group width="400" horizontalCenter="0" top="20" bottom="20">

              <s:SkinnableContainer width="500" top="10" bottom="10">

              <s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" focusEnabled="false">

              <s:Group width="100%" height="100%">

              <s:CheckBox x="102" y="100" label="Checkbox"/>

              <s:Button x="105" y="505" label="Button"/>

              <s:Button x="105" y="476" label="Button"/>

              </s:Group>

              </s:Scroller>

              </s:SkinnableContainer>

              </s:Group>

              </s:Application>

              • 4. Re: Scroller doesn't seem to work as expected
                Rob M Love Level 1

                Your example demonstrates precisely what I'm trying to accomplish. The difference between your example in my situation is that this particular component is about 3 levels away from the main application. Since every container outside of the component including the component itself with the exception of the scroller is set to 100% width and height I'm really a loss why this is not working. And have yet to find a workaround.

                I do appreciate the help.

                 

                Rob

                • 5. Re: Scroller doesn't seem to work as expected
                  David_F57 Level 5

                  if you notice in my example 100% is only used at the scroller level everything else is pinned to top and bottom(could also be left and right if needed) percentage locking to me is not ideal. Also minwidth and minheight in the application can also effect layout dimensions. Also try wrapping the scroller in a container rather than a group and see how that changes things.

                   

                  David

                  • 6. Re: Scroller doesn't seem to work as expected
                    mewk Level 3

                    Rob,

                     

                    By default the scroller policies are set to auto and so won't display unless they are needed. Let's look at your example, slightly modified:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/halo" 
                         minWidth="1024" minHeight="768">
                    
                      <s:Group >
                        <s:Rect left="0" right="0" top="0" bottom="0">
                          <s:fill>
                            <s:SolidColor color="green" alpha=".7" />
                          </s:fill>
                        </s:Rect>
                        <s:Scroller width="100%" height="100%">
                          <s:Group>
                            <mx:Form id="newInstrumentForm" x="0" y="0" width="550" height="635">
                            </mx:Form>
                          </s:Group>
                        </s:Scroller>
                      </s:Group>
                    </s:Application>
                    

                     

                     

                    With this setup the scrollers will never appear. By default the scrollers will only display if the content inside requires it and here the scroller will have a minimum dimension of 1024*768, which can easily fit the entire form (550*635). If you want the scrollers to always display then you need to set the vertical and horizontal scroll policies to true.

                     

                    - e

                    • 7. Re: Scroller doesn't seem to work as expected
                      Rob M Love Level 1

                      David, you hit it.

                       

                      I did not realize the minHeight minWidth would affect the scroller, after removing those values from the top-level application it worked as expected.

                       

                      Thank you to all who replied with possible solutions.

                       

                      Rob

                      • 8. Re: Scroller doesn't seem to work as expected
                        Paul The Lad Level 1

                        Hi David,

                         

                        I followed this post and your suggestions but it seems to me that UNLESS the immediate parent of the scroller has an explicit height defined, the data scrolls off the screen without any respect for the browser's height!

                        Did something change in the 2nd beta release 4.0.0.10xxx of gumbo?

                        How do you deal with this or do you not notice this at all?

                        Can you suggest/think-of some common newbie mistake that I may be making due to my lack of understanding?