+ Start a Discussion
Megha Mittal 19Megha Mittal 19 

Scrolling does not work in lightning component in salesforce1

I have a custom lightning component which is available as a tab in salesforce 1 app. 
The page shows a list, but I am unable to scroll it horizontally in the app.

Please let me know if there is a solution for this.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Megha,

Greetings to you!

I suggest you use ui:scrollerWrapper that enables native scrolling of Lightning Components in Salesforce app as well as in Lightning Desktop.

Below is the sample code which I have tested in my org and it is working fine in mobile also. You can modify the code as per your requirement.

Application:
<aura:application extends="force:slds">
    <c:UpdateInput />
</aura:application>

Component:
<aura:component controller="UpdateInputController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="Opportunities" type="List" />
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="force:refreshView" action="{!c.doInit}" />
    
    <ui:scrollerWrapper class="slds-scrollable_y">
        <div class="slds-col slds-m-around--medium">            
            <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer">
                <thead>
                    <tr class="slds-text-heading_label">            
                        <th scope="col"><div class="fieldLabel" title="Name">Name</div></th>
                        <th scope="col"><div class="fieldLabel" title="Amount">Amount</div></th>
                        <th scope="col"><div class="fieldLabel" title="Next Step">Next Step</div></th>
                        <th scope="col"><div class="fieldLabel" title="Probability">Probability</div></th>
                    </tr>
                </thead> 
                <tbody>    
                    <aura:iteration items="{!v.Opportunities}" var="opp" >
                        <tr>                     
                            <th scope="row">   
                                <ui:inputText class="field" 
                                              labelClass="slds-form-element__label"
                                              value="{!opp.Name}"
                                              aura:id = "OpportunityName" /></th>
                            <th scope="row">   
                                <ui:inputText class="field" 
                                              labelClass="slds-form-element__label"
                                              value="{!opp.Amount}" 
                                              aura:id = "OpportunityAmount" /></th>
                            <th scope="row">   
                                <ui:inputText class="field" 
                                              labelClass="slds-form-element__label"
                                              value="{!opp.NextStep }" 
                                              aura:id = "OpportunityNextStep " /></th>
                            <th scope="row">   
                                <ui:inputText class="field" 
                                              labelClass="slds-form-element__label"
                                              value="{!opp.Probability  }" 
                                              aura:id = "OpportunityProbability  " /></th>
                            <th scope="row">
                                <lightning:button value="{!opp}" 
                                                  label="Save Record" 
                                                  onclick="{!c.saveOpportunity}"/>
                            </th>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>
    </ui:scrollerWrapper>
</aura:component>

Controller:
({
	doInit : function (component, event, helper) {
        helper.getOpportunitiesList(component, event);
    },
    
    saveOpportunity : function (component, event, helper) {
        helper.updateHelper(component, event);
    }
})

Helper:
({
	getOpportunitiesList : function(component, event) {
        var action = component.get('c.getOpportunities');
        // Set up the callback
        action.setCallback(this, function(actionResult) {
            component.set('v.Opportunities', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    
    updateHelper : function(component, event) {
        var opp = event.getSource().get("v.value")
        console.log('opp-- > ' + JSON.stringify(opp));
        
        var action1 = component.get("c.saveOpp");
        action1.setParams({ "op" : opp });
        action1.setCallback(this, function(resp){
            var state = resp.getState();
            if(state === "SUCCESS"){
                $A.get('e.force:refreshView').fire();
                console.log('server- > ' + resp.getReturnValue());
                alert('Success');
            }
            else if (state === "ERROR") {
                var errors = resp.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + 
                                 errors[0].message);
                    }
                } 
                else {
                    console.log(resp.getReturnValue());
                }
            }
        });
        $A.enqueueAction(action1);
    }
})

CSS:
.THIS {
}

.THIS.scrollerSize {
    height: 780px;
}

Apex:
public class UpdateInputController {
    
    @AuraEnabled
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, Amount, NextStep, Probability, CloseDate FROM Opportunity LIMIT 100];
    }
    
    @AuraEnabled
    public static Opportunity saveOpp(Opportunity op) {
        update op;
        return op;
    }
}

* I have used <ui:scrollerWrapper class="slds-scrollable_y"> to get the horizontal scrolling. *

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas