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?

  • 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 '15 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 '15 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 '15 at 19:43
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;
}

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.