1

I have a modal window that is opened when clicking a quick action button on a record. It opens an aura component which contains a LWC containing my UI as well as my logic. A spinner should open in the middle of this LWC component but it is either opening in the middle of the screen (not the component) or it is opening in the right place but seems to open in front of my component with some kind of white background. I have found the same problem here for aura component but cannot use the solutions in LWC. (example of similar problem with an aura component)

Here are the different codes I tried and the results I obtained.

    <div class="slds-is-relative">
        <div class="slds-modal__header">
            <h4 class="title slds-text-heading--medium" >SAP Contract Validation</h4>
        </div>

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

    </div>

enter image description here

        <div class="slds-modal__header">
            <h4 class="title slds-text-heading--medium" >SAP Contract Validation</h4>
        </div>

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

enter image description here

    <div class="slds-modal__header">
        <h4 class="title slds-text-heading--medium" >SAP Contract Validation</h4>
    </div>

    <div class="slds-modal__content slds-is-relative" id="modal-content-id-1">
        <lightning-spinner variant="brand" alternative-text="Loading ..." size="large"></lightning-spinner>
    </div>

There is no spinner here enter image description here Testing with the code written in the best answer on the other post I linked

    <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>
        </div>
    </div>

enter image description here

3
  • 1
    Oh, I see now. Yes, I misunderstood your post. I'll need to test this out and get back to you. I'm deleting the answer for now, as it is not useful for your situation.
    – sfdcfox
    Apr 22, 2020 at 12:01
  • Try setting a height on the container in the first example like so: <div class="slds-is-relative" style="height: 200px;">.
    – geeljire
    Apr 22, 2020 at 15:14
  • @Sacha: Did you solve this? Please share if you find the answer on how to fix this
    – Priyanka
    Apr 15, 2021 at 10:56

1 Answer 1

0

Adding "slds-is-relative" to class of <lightning-spinner> was making it relative based on parent lwc in my case. So that spinner was not coming in middle of modal.

But adding slds-is-relative to parent div solved this issue for me

<div class="slds-modal__content slds-is-relative">

Or you can make .CSS file and add

.modalBody{
  position: relative;
}

And add it to your html

<div class="slds-modal__content modalBody">

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.