Using spinner component in quick action lightning modal component not rendered as expected
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> ...
In my case I want it to take up the entire screen.
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));
}