Scroll issue in Salesforce1 | Lightning ui:scrollerWrapper issue

Question

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%;
}

w3therby · Accepted Answer · 2017-05-16 16:56:58Z

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

sIQh · Accepted Answer · 2017-05-19 20:24:18Z

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

answered May 19 '17 at 20:24

sIQh

1901 silver badge9 bronze badges

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 '19 at 21:54

Add a comment |

Manish Patil · Accepted Answer · 2019-10-17 09:36:19Z

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

Stack Exchange Network

current community

your communities

more stack exchange communities

Scroll issue in Salesforce1 | Lightning ui:scrollerWrapper issue

3 Answers 3

Your Answer

Not the answer you're looking for? Browse other questions tagged lightning-aura-components lightning salesforce1-app aura scrolling or ask your own question.

Linked

Hot Network Questions

Scroll issue in Salesforce1 | Lightning ui:scrollerWrapper issue

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged lightning-aura-components lightning salesforce1-app aura scrolling or ask your own question.

Linked

Related

Hot Network Questions