1

How to add scroll in my component.I am beginner in lightning experience.I don't understand how to implement scrolling on page.it's working fine for less record but if i take more record then its not work.

enter image description here

  • put it inside a div and use css overflow:auto – Tushar Sharma Jun 8 '16 at 11:33
  • thanks Tusar, but i use this already but it is not working. <aura:component controller="ContactController"implements="force:appHostable,flexipage:availableForAllPageTypes">i have also use this but not working. – user30545 Jun 8 '16 at 11:43
  • Did you use Lightning Design System? – Anurag Bhardwaj Jun 8 '16 at 12:27
  • no m not using lightning design system.I am using lightning component. – user30545 Jun 8 '16 at 13:11
  • 1
    can you post your component and css code ? so that we can have a look at it. – Praveen Jun 8 '16 at 16:08
1

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.

In your case wrap the component code inside ui:scrollerWrapper.

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 example 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;
}
0

If you are using Lightning Design System with Lightning Component then it has a known issue with salesforce.

Please check below link for more details and click "This Issue Effects Me" button if it occurs because of this.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.