0

We have created lightning page and drag the component to page. we have used this page in Lightning experience and salesforce1 app. In LEX is working fine but In Salesforce1 app Spinner is not rendering across entire page.

What is the problem here, the spinner is not rendering across entire page so the end user able to click button more than time. here we attached some sample code. If any one find solution please share with us.

SpinnerInSF_app.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
        
        <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
        
        <aura:attribute name="showSpinner" type="Boolean" default="false" access="public"/>
        <aura:attribute name="orderOfElements" type="List" default="[]" access="public"/>
        
        <div class="slds-gird slds-wrap bgcolor">
            <aura:iteration items="{!v.orderOfElements}" var="orderOfElement">
                
                <div class="slds-col">
                    {!orderOfElement}
                </div>
                <div class="slds-col">
                    <lightning:button variant="brand" label="Perform callback action" title="action" onclick="{! c.handleClick }" />
                </div>
            </aura:iteration>
        </div>
        
        
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner alternativeText="Loading" size="small" variant="brand"/>
        </aura:if>
        
    </aura:component>

SpinnerInSF_appController.js

({
    doInit : function(cmp, event, helper) {
        let orderOfElements = [];
        for(let i = 1; i <= 10; i++){
            orderOfElements.push("Element "+ i);
        }
        cmp.set("v.orderOfElements", orderOfElements);
        
    },
    handleClick : function(cmp, event, helper){
        console.log("hai:::::");
        cmp.set("v.showSpinner", true);
        window.setTimeout($A.getCallback(function(){
            cmp.set("v.showSpinner", false);
            console.log("hai2:::::");
        }), 10000);
        
    }
})

SpinnerInSF_app.css

.THIS.bgcolor{
    background: white;
}

.THIS.slds-spinner_container {
    position: fixed !important; 
}
0

You need to wrap the contents of the component inside a div with class slds-is-relative

To use the spinner in a component, the parent of the spinner should be set to position:relative. You can use the utility class .slds-is-relative or add the declaration to your custom component CSS...

Reference

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.