5

I'm using ui:scrollerWrapper to implement scrolling functionality in Salesforce1 application as the default SLDS-SCROLL is still not compatible in Salesforce1 app.

Recently, I'm facing scrolling issues in all the devices, when scrolling is enabled using the ui:scrollerWrapper.

The scrolling is not at all smooth in devices. Also, sometimes, the scrollbar disappears while scrolling!

I've tested out the same in the latest iOS version (10.3.1) and the Salesforce1 app version 12.2 (Build #3031637) in iPad as well as in iPhone.

I've created an unmanaged package so that it's easier to replicate the issue.

Here's the link to install the unmanaged package:- https://login.salesforce.com/packaging/installPackage.apexp?p0=04t28000000qnoC

Is there anything wrong in which I've enabled scrolling functionality using ui:scrollerWrapper? It would be great if anyone could provide any workarounds to fix the scroll issue.

I'm just posting the code as well so that people who don't have time to install the package could just skim through the code and provide any valuable feedback for the same.

Component:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <ui:scrollerWrapper class="scrollableWrap">
        <div class="slds slds-grid slds-wrap tableDiv">
            <ui:scrollerWrapper class="scrollableinnerWrap">
                <div class="slds-col slds-size--1-of-1 salesManagerForecastTableWrap">
                    <table class="salesManagerForecastTable slds-table slds-table--bordered" id="myTable" width="100%">
                        <tr align="center">
                            <th width="" class="slds-cell-wrap slds-text-align--left" scope="col">
                                <b> Name </b>
                            </th>
                            <th width="" class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Forecast <br/> </b>
                            </th>   
                            <th width=""  class="slds-cell-wrap slds-text-align--center" scope="col">
                            </th>
                            <th width=""  class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Closed Won </b>
                            </th>       
                            <th width=""  class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Commit <br/>  </b>
                            </th>

                            <th width=""  class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Best Case <br/> </b>
                            </th>
                            <th width=""  class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Predicted Amount <br/></b>
                            </th>
                            <th width=""  class="slds-cell-wrap slds-text-align--right" scope="col">
                                <b> Quota <br/> </b>
                            </th>
                        </tr>

                    <tbody>
                            <tr>
                                <td align="left" class="slds-cell-wrap slds-text-align--left">
                                    <ui:outputText value="Test Data" />
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <ui:outputText value="Test Data" />
                                    <div class="progressBarContainer">
                                        <div class="progressBar">
                                            <div class="progressPercent" style="width:77%;"></div>
                                        </div>
                                        <div class="progressBarValue">77%</div>
                                    </div>
                                </td>
                                <td align="center" class="slds-cell-wrap slds-text-align--center">
                                    <div style="position:relative;">

                                    </div>
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <div class="forecastDataVal">
                                        <ui:outputText value="250000"/>
                                    </div>
                                    <div class="progressBarContainer">
                                        <div class="progressBar">
                                            <div class="progressPercent" style="width:55%;"></div>
                                        </div>
                                        <div class="progressBarValue">55%</div>
                                    </div>
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <div class="forecastDataVal">
                                        <ui:outputText value="9998986768"/>
                                    </div>
                                    <div class="progressBarContainer">
                                        <div class="progressBar">
                                            <div class="progressPercent" style="width:33%;"></div>
                                        </div>
                                        <div class="progressBarValue">33%</div>
                                    </div>
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <div class="forecastDataVal">
                                        <ui:outputText value="9900000"/>
                                    </div>
                                    <div class="progressBarContainer">
                                        <div class="progressBar">
                                            <div class="progressPercent" style="width:99%;"></div>
                                        </div>
                                        <div class="progressBarValue">99%</div>
                                    </div>
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <div class="forecastDataVal">
                                        <ui:outputText value="75676867"/>
                                    </div>
                                    <div class="progressBarContainer">
                                        <div class="progressBar">
                                            <div class="progressPercent" style="width:32%;"></div>
                                        </div>
                                        <div class="progressBarValue">32%</div>
                                    </div>
                                </td>
                                <td align="right" class="slds-cell-wrap slds-text-align--right">
                                    <ui:outputText value="987996786" />
                                </td>
                            </tr>
                    </tbody>
                    </table>
                </div>
            </ui:scrollerWrapper>
        </div>
    </ui:scrollerWrapper>
</aura:component>

Style:-

.THIS.scrollableWrap{
    width: 100%;
} 
.THIS .progressBarContainer{
    min-width: 135px;
}
.THIS .tableDiv{
    width: 100%;
}
.THIS .progressBar {
    width: 95px;
    background-color: #ddd;
    display: inline-block;
}
.THIS .progressPercent {
    height: 3px;
    background-color: #0192ff;
    text-align: center;
    color: white;
    max-width: 100%;
}
.THIS .progressBarValue{
    width: 40px;
    display: inline-block;
    color: #0192ff;
    font-size: 10px;
}
.THIS .scrollableinnerWrap{
    width: 60%;
}
4

We've had good success with the following pattern:

<aura:component implements="...." controller="....">
    <ui:scrollerWrapper class="scrollerSize">
        <div class="innerDivWrapper">
            <!-- Your Content here... -->
        </div>
    </ui:scrollerWrapper>
</aura:component>

And the CSS:

.THIS.scrollerSize {
    height: 100%;
    width: 100%;
    border-radius: 1px;
}

.THIS .innerDivWrapper {
    min-height: 101%;
    padding-bottom: 20px;
}

You may want to look at the way that you've nested ui:scrollerWrappers. I haven't tested that specific scenario but I strongly suspect that may be causing the issues with scrolling performance that you've described. Try eliminating the nested scrollerWrapper if possible and then work up from a working base case -- that usually does the trick for me!

  • Thanks for the response, @w3therby. For normal divs, there isn't this issue. Have you tried to enable scrolling functionality for a table? – SE_User May 17 '17 at 4:21
2

What about just keeping the scrollableinnerWrap with the following CSS:

.THIS .scrollableinnerWrap{
    height: 90vh;
    width: 100%;
}

and replace the outermost with a div having following CSS:

 .THIS .outer-container{
    position:fixed;
   }

In case we want to keep both, I think we can apply the above CSS for outer scrollWrapper and apply the following for the innerWrap:

.THIS .scrollableinnerWrap{
    max-height: 70vh;
}
  • Thanks for the response @slQh, but unfortunately, this is not working for me. – SE_User May 23 '17 at 5:25
  • It helped usability to make the entire component position fixed in my case: .THIS { position: fixed; } – Jake Jan 11 at 21:54
2

I had faced this similar issue where I was not able to scroll a datatable horizontally on iPad and iPhone however it worked fine on Android. There is an issue with the status "In Review" on Salesforce Trailblazer Community for this bug.

As a workaround, I added a div with a height of 5px below the datatable and reduced the height of the parent div by 5 px. This resolved the scrolling issue.

<aura:component>
    <aura:attribute type="Account[]" name="acctList"/>
    <aura:attribute name="mycolumns" type="List"/>

    <aura:handler name="init" value="{!this}" action="{!c.fetchAcc}"/>

    <lightning:card title="iPhone/iPad Scrolling Demo">
         <lightning:layout class="slds-var-p-around_medium">
             <lightning:layoutItem size="10">
                 <ui:scrollerWrapper class="scrollerSize datatable-parent">
                    <lightning:datatable data="{! v.acctList }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"/>
                     <div class="buffer-div"></div>
                 </ui:scrollerWrapper>
             </lightning:layoutItem>
        </lightning:layout >
    </lightning:card>
</aura:component>

With these styles

.THIS .buffer-div {
    min-height:5px;
    width:100%;
}

.THIS .datatable-parent{
    height: calc(100% - 5px);
}

You will be able to see the code sample here

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.