function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ChikPea Inc 11ChikPea Inc 11 

Lightning SLDS scroll through option incompatible with IOS

Hi,

We have been using SLDS to create a tab in lightning to make it mobile and tablets compatible and responsive.. The compatibility works fine for android though, for IOS the scroll through option is not working or not responsive when we held the tablet vertically. Thanks in advance.
NagendraNagendra (Salesforce Developers) 
Hi Chikpea,

You can use a 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 Code: 
<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 Code: 
.THIS .sWrapTest {
    height:100px;
    width:100px;
}
For additional information please check with below link from the success community. Hope this helps.

Thanks,
Nagendra
ChikPea Inc 11ChikPea Inc 11
We have used the  <ui:scrollerWrapper class="sWrapTest"> property along with style but our main problem is that scrollablity is not always working well in iOS device . Otherwise it is working fine in andriod phones . Any suggestion for the scrollable property of iOS device using SLDS is highly required . Thanks
 
Daisy ScottDaisy Scott
Hi ChikPea,

Find a solution for why for IOS the scroll through option is not working or not responsive when we held the tablet vertically.

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. To enable scrolling, specify a height that's smaller than its content.The Lightning Design System scrollable class isn't compatible with native scrolling on mobile devices.
Use ui:scrollerWrapper if you want to enable scrolling in Salesforce1. 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
<div class="mainWrap" style="margin-left:50px;">
<ui:scrollerWrapper class="sWrapTest">
<ul class="testDiv">
<li>jansBaskTraing
</li>
<li>jansBask implementing salesforce application.jansBask
isa authorized partner of salesforce
</li>
<li>janbaskhepls you to build your carrier in salesforce. 
</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>
Add Css
.THIS .sWrapTest {
height:180px;
width:120px;
}
.THIS.outerScroller {
border-radius: 11px;
}
.THIS.innerScroller {
border-radius: 10px;
}
Application
<aura:application extends="force:slds" >
<c:scrollDown />
</aura:application>

Output InIos Device

Take a look at screen shot
User-added image


Thanks
JanBask-Salesforce Experts (http://www.janbask.com/salesforce-consulting-services.php)
Gayathri Ravula 12Gayathri Ravula 12
Hi JanBask,

can you please help me with complete code of scroller wrapper. I am facing issue with ui:scrollarwrapper is not working with ios devices.

Thanks.