6

i've tried using ui:spinner and lightning:spinner in my lightning component. when i enable the spinner the spinner covers the whole top and bottom of my modal page. My expected behavior is to place the spinner inside the modal popup alone. Is there any solution that could satisfy my need?

spinner covvering the whole popup

Quickaction lightning component:

<aura:component implements="force:lightningQuickActionWithoutHeader">
<lightning:spinner></lightning:spinner>
            <br/><br/><br/><br/><br/><br/>
        <center><img style="width: 4%; height: 4%" src="/resource/SLDS212/assets/icons/utility/error_60.png" alt="Loading..." />A System Error has Occurred.Please try again later</center>
</aura:component>
  • 1
    Please throw some code snippets to the question so its easier to see whats wrong – Mohith Shrivastava Oct 23 '16 at 5:26
  • @MohithShrivastava i have added the code snippet for your reference. I dint do much in that lightning component. – Saravanan Baskar Oct 23 '16 at 5:46
8

Adding of "slds-is-relative" class to the parent div solved this issue for me:

<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container " style="width:100%;">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Test</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium slds-is-relative">
                        <div class="slds-spinner_container">
                            <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
                                <span class="slds-assistive-text">Loading...</span>
                                <div class="slds-spinner__dot-a"></div>
                                <div class="slds-spinner__dot-b"></div>
                            </div>
                        </div> ...
0

I did some workaround of fixing the spinner by overriding the class properties.I want this to be applied only to desktops.

@media (min-width:1025px) { /*Desktop Break point*/
.THIS.slds-spinner_container {
    top: 16% !important;
    bottom: 16% !important;
    }
}
  • 3
    Hi @SaravananBaskar This shouldn't be done as this is not a proper method. Did you try what Junaid has mentioned in his answer? Try adding the spinner element inside modal popup component. – SE_User Oct 24 '16 at 9:13
  • @SE_User yes the spinner component is inside the lightning modal components. thats the one i tried first. You could see in the code ive pasted in the question. – Saravanan Baskar Oct 24 '16 at 10: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.