9 Replies Latest reply on Jul 15, 2011 3:27 AM by FemkeR

    How to add padding to s:Scroller?

    Alok Jain

      I have used scroller for my custom component:

       

       

      <s:Scroller top="0" width="100%" verticalScrollPolicy="auto" height="100%" >
           <components:propertyDetails  left="20" right="20" id="propDetails"  />
      </s:Scroller>
      

       

       

      My custom component is a group:

       

       

      <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/mx" height="100%" width="100%" xmlns:components="components.*">
           <s:layout>
                <s:VerticalLayout gap="0" paddingRight="10" paddingTop="5" paddingBottom="5" paddingLeft="0" />
           </s:layout>
      
           <!--  Some code here -->
      
      </s:group>
      

       

       

      I want paddingRight to be 10 only if scrollbar appears on page, otherwise padding should be 0.

       

      In simple words i need a gap of 10 pixels in scrollbar and component if scrollbar is visible, otherwise component should use that space.

       

      Is this possible to achieve?

       

      Best Regards,

      Alok Jain

        • 1. Re: How to add padding to s:Scroller?
          alinator11 Level 2

          I would use ActionScript to do this. Here are steps I would suggest:

           

          1. Add parent components in mxml and give them all id's

          2. Write ActionScript that adds items to the components (setters and getters for your dataSource and viewPort).

          3. Determine the size of component that causes the scroll bar to appear.

          4. If the size of the child component is > the size that triggers the scroll bar, id.paddingRight = whatever, else paddingRight = somethingElse.

           

          Of course I have not actually tested this. But, with MXML, there is always a way around so if this does not work, I would next try making a form (or group) that is dynamically sized based on the content that is to be added, adding all the content to that and then adding the form to the scroller.

          1 person found this helpful
          • 2. Re: How to add padding to s:Scroller?
            Devtron Level 3

            I am not 100% sure, but couldnt you just re-skin the spark Scroller, and adjust the padding in the new skin?

             

            try  it...go to FILE -> NEW -> MXML Skin...in host component section,  specify spark Scroller. that will generate the default skin for spark  Scroller.

             

            then you can modify that skin and add your padding there, and reference the new skinClass from spark Scroller.

             

            This would allow padding inside of the Scroller component when it is visible.

            • 3. Re: How to add padding to s:Scroller?
              Shongrunden Adobe Employee

              Changing the position of the scrollbars in the Scroller component is kind of tricky.

              As mentioned earlier you could custom skin the Scroller, but you would need to write a custom ScrollerLayout to control the position of the scrollbars.
                 
              You might want to look at the Scroller.minViewportInset property:
              http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Scroll er.html#minViewportInset
                 
              Otherwise you might be better off not using a Scroller component but rather hooking up individual HScrollBar and VScrollBar components yourself:

              http://flexponential.com/2009/10/09/changing-the-position-of-the-scroll-bars-in-a-spark-li st/

              • 4. Re: How to add padding to s:Scroller?
                FM_Flame Level 1

                Hi,

                I was just trying to do the same thing. And I thought this would be simple...

                 

                Ok so minViewportInset doesn't work. my v scroll bar is about 20 px width and If I set this property to 50px the viewport gets smaller by 50 px from all sides when there is no scroller visible. And when it is visible it's located on the same spot where it would be if you had minViewportInset="1";

                 

                So this is like a permanent not depending on the scroller visibility condition.

                 

                What I need is simply as the guy who posted this post. When there is no scroller - full size viewport, when there is I want 10px padding for my text.

                 

                Shongrunder could you tell if there is some developement on this matter, I see this topic is from long time ago. If no then what should I do:

                1) scrollerLayout or 2) individual VScrollBar. I need the easiest solution

                 

                Also if the guy who posted this question found a good work around this, please share it

                 

                Thanks!

                • 5. Re: How to add padding to s:Scroller?
                  Shongrunden Adobe Employee

                  @FM_Flame - This is probably not trivial to implement via a custom ScrollerLayout because dealing with adding and removing scrollbars automatically can get very tricky. 

                   

                  An example: deciding that the vertical scroll bar should be added might change the width of the viewport which might in turn cause the height of the viewport to change which means that a a horizontal scroll bar might need to be added.  These kinds of situations can sometimes lead to looping.  If you do want to take this path check out the code in ScrollerLayout that protects against this (see ScrollerLayout.invalidationCount and how it's used in updateDisplayList).

                   

                  I would guess that it might be easier to hook up your own scrollbars. And probably easier if your use case is only one scrollbar rather than two.

                   

                  If you think this is a common use case please file an enhancement request with more details at http://bugs.adobe.com/jira/

                  • 6. Re: How to add padding to s:Scroller?
                    springframework Level 1

                    Hey, I was looking for a solution to this also but I realized that this isn't really needed at all.

                     

                    just pad the content in the group thats in the scroller.

                    • 7. Re: How to add padding to s:Scroller?
                      FM_Flame Level 1

                      In some cases you can pad the content from all sides, then you will have that gap between the content and the VScrollBar, but also you will have a gap between the content and the left side of the Scroller. If you pad the content only from the right side, then you will have a gap only between the content and the VScrollBar, but if it is not visible, you will have no gaps for every other side of the Scroller, except for the right.

                       

                      So what you say doesn't really solve the problem, cause the problem is to only add gap between the VScrollBar and the content when the VScrollBar is visible.

                      • 8. Re: How to add padding to s:Scroller?
                        Wrataxas Level 2

                        I took the easy way out and just made the scrollbar be visible all the time, even when there's not enough content to be scrolled.  So the layout is static.

                         

                        verticalScrollPolicy="on"

                         

                        • 9. Re: How to add padding to s:Scroller?
                          FemkeR

                          Although it is an old post here the simpliest solution:

                           

                          Add a custom skin for the scroller,

                          add to that a custom skin for the scroll bar,

                          add to the track and thumb the spacing you want. For example left="5".

                          This will result that there are 5 pixels spacing between the content and the vertical scrollbar.

                           

                          Kind regards