[SalesForce] Using spinner component in quick action lightning modal component not rendered as expected

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>

Best Answer

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> ...
Related Topic