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
10

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> ...
| improve this answer | |
2

In my case I want it to take up the entire screen.

enter image description here

Considering that the modal of the Quick Action has the following css class:

.slds-modal__container {
    margin: 0 auto;
    width: 50%;
    max-width: 40rem;
    min-width: 20rem;
}

We can put the spinner component inside a

<!-- Loading wheel -->
<div class="loading_wheel">
    <aura:if isTrue="{! v.loading }">
        <lightning:spinner alternativeText="Loading" size="large" variant="brand"/>
    </aura:if>
</div>

and add the following css classes

/* -------- LOADING WHEEL --------- */
.THIS .loading_wheel{
  position: fixed;
}
.THIS .slds-spinner_container{
  width: 100vw;
  left: min(-25vw, calc(-50vw + 20rem));
}
| improve this answer | |
-1

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;
    }
}
| improve this answer | |
  • 4
    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.