3

I am facing a different issue as when I use bootstrap css.Here is my code:

<ul id="insideScroller" class="scrollable-menu scrollbar list-group" style="-webkit-overflow-scrolling: touch;" >

   <aura:iteration var="sobj" items="{!v.SobjectRecords}">

     <!-- Navigation to record detail page works only SF1-->
     <li class="list-group-item" id="{!sobj.SId}" onclick="{!c.navigateToRecord}" >

       <aura:renderIf isTrue="{!0 lt v.fieldsToDisplayCount}">
         {!v.lstFldDisp[0]} : {!sobj.f1}<br/>
       </aura:renderIf>

       <aura:renderIf isTrue="{!1 lt v.fieldsToDisplayCount}">
         {!v.lstFldDisp[1]}  : {!sobj.f2}<br/>
       </aura:renderIf>

       <aura:renderIf isTrue="{!2 lt v.fieldsToDisplayCount}">
         {!v.lstFldDisp[2]} : {!sobj.f3}<br/>
       </aura:renderIf>

     </li>
   </aura:iteration>
 </ul>

I am able to see the scrollbar in SF1 and the desktop.But when I load the same page in mobile the scrollbar disappears.

Any workarounds over this?

Improve this question
3
  • I met similar issue about scrolling on mobile native Salesforce1. It seems that css styled scrolling is not working on mobile native Salesforce1 . Ultimately I have to use a scrolling library from Salesforce ScrollerJS
    – Leo
    May 26, 2015 at 4:02
  • There is a preventDefault call that disables native scroll events in the Salesforce1 mobile app, unfortunately. I know the product teams are looking at ways to remove this pain, but that's just how it is today. I have not worked on a work-around, so just leaving this as a comment as someone else might have a real solution to the problem.
    – pchittum
    May 26, 2015 at 13:12
  • Then what should be a proper alternative for it ?I want some workarounds as I have to display around 1000 records in mobile.I thought scrollbar will be a good option to it.I want some suggestions from your end which will be helpful.
    – user20757
    May 26, 2015 at 19:43

1 Answer 1

Reset to default
2

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;
}
Improve this answer

You must log in to answer this question.

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