2

I am displaying a long scrollable content in a modal

<c:strike_modal aura:id="filterModal" title="Filter volumes" primaryButtonLabel="Ok" secondaryButtonLabel="Cancel" showHeader="true" showFooter="true" showModal="false">
    <div class="slds-scrollable slds-is-relative">
        <lightning:spinner aura:id="spinner" class="slds-hide" />
        ...
        much content
        ...
    </div>
</c:strike_modal>

and my problem is that the spinner is not shown when the user scrolls to the bottom of the modal.

2

If Martin Lezer's answer is not what you're looking for, you can just put the lightning:spinnner outside of the <div class="slds-is-relative">. The spinner will be centered and the user will not be able to scroll.

5

If you want the spinner to follow the user's scroll, you can modify the position of the spinner.

By default, Lightning add the spinner to the center of the page. Using a div with the slds-spinner class with the following style:

.slds-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}

To make this div follow the scroll, you can override this style and set the position to fixed using:

.THIS .slds-spinner {
    position: fixed;
}
2
  • 1
    Also you can use <lightning:spinner class="slds-is-fixed"/> if you don't want to add custom css. – Michal V Oct 8 '18 at 13:16
  • @MichalV This is useful, Thank you! – Sandip Panchani Apr 23 at 12:24

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.