function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Srinivas223Srinivas223 

Mobile Layout in lightning is not flexible

My lightning component with list of opportunites is working perfect on the desktop. It is having too many columns and when opened in Mobile it is like in the below screenshot.
it is displaying first three fields on the mobile but not all. If i try to navigate to the right side it is not scrolling with my touch screen. In the second screenshot I have up and down arrows above the key pad. If i click on those arrows I can move to other fileds that are not visible on the screen. But, my requirement is to just scroll side ways as well to see the other fields instead of using arrows. Is there anyway to get this functioality?

I appreciate your help.


User-added imageUser-added image
Best Answer chosen by Srinivas223
Khan AnasKhan Anas (Salesforce Developers) 
Hi Srinivas,

I trust you are doing splendidly and enjoying the season!

I suggest you to 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;
}

Server Controller: 
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 inform if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Srinivas,

I trust you are doing splendidly and enjoying the season!

I suggest you to 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;
}

Server Controller: 
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 inform if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas​
This was selected as the best answer
Ravi Dutt SharmaRavi Dutt Sharma
The general responsive design for tables is that the columns would be converted to rows. For using the responsive behaviour provided by Lightning on tables, you need to add below style classes on your table.
  
<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-table_col-bordered slds-no-row-hover slds-table_striped">
	<thead>
		<tr class="slds-text-title_caps">
            <th class="slds-cell-shrink slds-cell-wrap" scope="col">
                <div title="Title">Title</div>
            </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="slds-cell-wrap" scope="row" data-label="Title">
				<lightning:buttonIcon iconName="utility:add" variant="bare" onclick="{!c.onClick}"/>
			</td>
		</tr>
	</tbody>
</table>

 
Srinivas223Srinivas223
Hello Khan,
ScrollerWrapper working fine now on the mobile. I used it wrongly before. Thank you for your help. 
But, after using ScrollerWrapper, I checked it on Desktop, it is not touch screen and i could not scroll side ways. Before I use scroller, my desktop is having an option to move sideways. But now i dont see it to move sideways.

Once again thank you for your time and effort.

User-added image