7

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

  • 1
    i am asuming you have a typo here--> "slds=hide" or is this actually in your code? Also, any reason you are not using $A.util.toggleClass instead? and why are you using a boolean attribute on your spinner and using aura:if to display it? – glls Dec 22 '17 at 16:33
  • yes, you are right we can use toggle class, I just updated with toggle class, however I am still getting the white patch. am I missing anything else? – Ajay Dec 22 '17 at 16:55
  • now your css attribute value shows slds-show in your utilit class and in your lightning spinner component slds-hide – glls Dec 22 '17 at 16:58
8

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

  • Does not work for me... Or at least this causes the spinner to not act as an overlay anymore. Instead, it pushes all content down. Does that work on your side? – Willem Mulder Dec 3 '18 at 10:32
  • @WillemMulder I think this fix stopped working and pushed content down starting with summer 18 – Eric Dec 3 '18 at 14:17
5

I have done something like this. better than earlier.

.THIS .slds-spinner_container  {
    background-color: rgba(0, 0, 0, 0.10);
    margin-top: 200px;
    margin-bottom: 200px; 
}
2

Several pointer from the original code you posted:

1- why use a boolean attribute to set the value of your spinner to true or false?

2.- why wrap the spinner within an aura:if?

3.- I am asuming you had a typo here--> "slds=hide"

4.- why not simply use $A.util.toggleClass instead of addClass and RemoveClass?

After updating your post, now you changed the name of the CSS class you are targeting from slds-hide to slds-show in the $A.util.toggleClass. So naturally, this will not work either.

  • the toggleClass working fine as expected, only thing which I am not able to figure out is to get rid of the white patch while spinner is ON. by the way with toggle class the code is much simplified. Thank you. – Ajay Dec 22 '17 at 17:35
  • normally, the overlay should be removed, unless it is not part of the spinner itself. if you to right click and inspect the element, you should be able to fetch the css class value and target it accordingly. – glls Dec 22 '17 at 17:46
  • is this wha you actually have in your code --> $A.util.toggleClass(spinner, 'slds-show'); ?? – glls Dec 22 '17 at 22:10
2

The following div structure and CSS worked for me when using overlayLib to generate the modal.

In the Lightning Component that you inject into the body of the overlayLib modal, use this div structure with the "slds-is-relative" class applied in the right place.

<div>
    <div class="slds-is-relative">
        <aura:if isTrue="{! v.loading }">
            <lightning:spinner size="medium" variant="brand" />
        </aura:if>
        <!-- OTHER MODAL MARK-UP HERE -->
    </div>
</div>

This results in...

enter image description here

  • This is the answer that worked for me – Dan Puza Oct 17 at 19:56
1

Use following code in .css file of lightning component, working for any height

.THIS.slds-spinner_container{
    background: none;
}
0

The white patch is due to the div wrapping the spinner element which has the class applied

slds-align--absolute-center

Please change the class or take out the div.

0

This is still an issue and the solution is just to remove the element .slds-spinner_container

Instead of the built-in spinner use this:

<div>
<div
  role="status"
  class="slds-spinner slds-spinner_brand slds-spinner_medium"
>
  <span class="slds-assistive-text">Loading</span>
  <div class="slds-spinner__dot-a"></div>
  <div class="slds-spinner__dot-b"></div>
</div>

And you will get the desired result

enter image description here

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.