4

How to get scrollbars in Lightning Components.Standard HTML to get it is not working

<div style="width:300px;height:1000px;overflow:scroll;">
2
  • Anyone have a answer for this yet? Commented Apr 25, 2016 at 18:28
  • Hi @OnttuLindeman You can use newly added Lightning component in the Winter '17, ui:scrollerWrapper that enables native scrolling in Lightning Components Salesforce1 app as well as in Lightning Desktop. salesforce.stackexchange.com/a/145964/29317
    – SE_User
    Commented Oct 26, 2016 at 6:56

4 Answers 4

4

You can use newly added Lightning component in the Winter '17, ui:scrollerWrapper that enables native scrolling in Lightning Components Salesforce1 app as well as in Lightning Desktop.

A ui:scrollerWrapper creates a container that enables native scrolling in Salesforce1. This component enables you to nest more than one scroller inside the container. Use the class attribute to define the height and width of the container.

Please find the code below:

Component:-

<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes">
    <div class="mainWrap">
        <ui:scrollerWrapper class="sWrapTest">
            <ul class="testDiv">        
               <li>In the Winter ’17 release, many of your favorite features 
                   are easier to use than ever before. 
               </li>
               <li>Lightning Experience has a brand new                      
                   navigation bar and lots of critical sales,
                   service, and analytics capabilities. 
               </li>
               <li>You’ve got more options for managing customer and partner
                   communities, running your business from your phone, 
                   and keeping your data and your users secure. 
               </li>
               <li>Not to mention plentiful new
                   customization and app development features, 
                   including custom Lightning apps.
               </li>                      
               <li>Other features require direct action by an administrator 
                   before users can benefit from the new functionality.
               </li>
               <li>If a key feature is also available in Salesforce1, 
                   our mobile app, we mention that in the feature description. 
               </li>
               <li>ui:scrollerWrapper
                   Creates a container that enables native scrolling in 
                   Salesforce1.
               </li>

            </ul>
        </ui:scrollerWrapper>
    </div>
</aura:component>

Style:-

.THIS .sWrapTest {
    height:100px;
    width:100px;
}
4

Salesforce has created a "Known Issue" for this problem:

https://success.salesforce.com/issues_view?id=a1p30000000ePVNAA2

Please click the "This Issue Affects Me" button.

3
class="slds-scrollable--y"
class="slds-scrollable--x"

use this class for scrollbars.

0
1

Standard HTML "overflow:scroll" doesn't work in Lightning components.

You can create a scrollDiv around your div in component and set the following in your css to make it work.

 .THIS div.scrollDiv {
    width: 100%;
    overflow-y: auto;
}
5
  • overflow-y is not working for me. Other properties like background-color that I set in scrollDiv class are working fine. Please let me know if could get it to work
    – Suneel
    Commented Jul 1, 2015 at 21:52
  • Don't specify height in scrollDiv class. Commented Jul 2, 2015 at 2:21
  • If you don't specify height of parent than browser will automatically add scroller , So far this is the only way. Commented Jul 2, 2015 at 4:37
  • I didn't mention height attribute in the CSS class(just width and overflow-y attributes) and I still don't see Horizontal scroll working for me in Salesforce1.
    – Suneel
    Commented Jul 2, 2015 at 22:31
  • Getting errors when i add .THIS div.scrollDiv { width: 100%; overflow-y: auto; } Commented Nov 12, 2015 at 14:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .