0

I am trying to add a lightning spinner, and I see the following behavior. The Input fields are not greying out when the spinner is on the screen
I am trying to add a lightning spinner, and I see the following behavior. The Input fields are not greying out when the spinner is on the screen

Below is the code :

CSS :

.loadingSpinner{
    position: fixed;
    top:50%;
    left: 50%;
    width: 80px;
    height: 80px;
}
.spinner-backdrop{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.5);
}

HTML :

<div class="loadingSpinner">
   <lightning-spinner alternative-text="Loading" size="medium"  ></lightning-spinner>
   <div class="spinner-backdrop"></div>
</div>

<div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12">
    <div class = "slds-container_large slds-container_center" style="padding-left: 1rem; padding-right: 1rem;">
        <div class="slds-grid slds-wrap">
          <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12 slds-p-horizontal_medium">
            <!--Field-->
            <span>
              <template  if:true={Options}>
                <abbr title="required" class="slds-required requiredCss">*</abbr>
                <lightning-combobox
                  name="Topic"
                  label="Topic"
                  value={TopicValue}
                  options={topicMap}
                  onchange={handleChange}
                ></lightning-combobox>
              </template>
              <template if:true={isError}>
                <span class="error">Complete this Field</span>
              </template>
            </span>
          </div>
        </div>
      </div>
</div>

How can I grey out the entire background?

5
  • Please provide the code of the input elements that you are using in the HTML.
    – Sneh
    Commented Jun 14, 2023 at 11:54
  • @Sneh I have added the snippet of a field. Please check Commented Jun 14, 2023 at 12:06
  • And slds-backdrop isn't in your snippet... Commented Jun 14, 2023 at 12:11
  • Does this answer your question? Why slds-backdrop is not part of slds-modal in Modal? Commented Jun 14, 2023 at 12:12
  • No @RenatoOliveira, I am not using a modal. the screen is on the tab Commented Jun 14, 2023 at 12:57

1 Answer 1

1

Move the <div class="loadingSpinner">...</div> at the end of the HTML after all the input fields.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .