lightning:spinner Overlay screen

How do I remove the white patch on overlay screen?

<div class="slds-align--absolute-center">
        <lightning:spinner aura:id="spinner" variant="brand" size="large" class="slds-hide"/>
     </div>

JS:

saveNewRecord: function(component) {
        var spinner = component.find('spinner');
        $A.util.toggleClass(spinner, 'slds-show');
    }

Issue:
enter image description here

Answer

I recently ran into this issue and the problem is that you need a slds-is-relative on the containing element.

When a lightning component is used as part of a quick action SF automatically adds a bodyWrapper classed div around the component.

Thus if your component is structured like so:

<aura:component>
     <lightning:spinner ....../>
</auraComponent>

or

<aura:component>
  <div>
     <lightning:spinner ....../>
  </div>
</auraComponent>

The Fix is to simply add slds-is-relative to the containing div, and if there is not one then add one as so

<aura:component>
   <div class="slds-is-relative">
     <lightning:spinner ....../>
   </div>
</auraComponent>

and the background for the spinner will be contained within the quick action window

Also, since the content is not loaded when the spinner is present you may need to add

style="min-height: 50vh;"

to the containing div to get the spinner centered.

If we could only get access to the bodyWrapper or if SF would add slds-is-relative to the div they wrap around it we would not need to do the above

Attribution
Source : Link , Question Author : Ajay , Answer Author : David Cheng

Leave a Comment