11

In my custom Lightning component I can't work out how to apply the proper SLDS classes to my component.

<aura:component controller="...">

<div aura:id="uploadCard" class="slds-card__header">            
    <div class="slds-form--compound ">
        <component content goes here>

        <div class="slds-hide slds-spinner_container"  aura:id="uploadSpinner">
            <div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
                <div class="slds-spinner__dot-a" />
                <div class="slds-spinner__dot-b" />
            </div>
        </div>
    </div>
</div>

When applying a spinner like this, the whole page gets coverd by the container and the spinner shows in the middle of the page. In my scenario, I just want it to show on top of my component. I tried applying the container class to different elements, but that just excludes the element from the greyed out area and mucks up the layout.

So is there someone who knows how to appy the container only to my component and not the entire page?

15

You need to apply position: relative to the component element, in your case uploadCard. This contains the overlay to within the boundaries of your component The following code works as expected (jsfiddle.net) and overlays only your component:

<div aura:id="uploadCard" class="slds-card__header" style="position:relative">
  <div class="slds-form--compound">
    <div>content goes here</div>
    <div class="slds-spinner_container" aura:id="uploadSpinner">
      <div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
      </div>
    </div>
  </div>
</div>

It will render like this:

Alternatively, you can assign the class .slds-is-relative which has the same effect:

<div aura:id="uploadCard" class="slds-card__header slds-is-relative">...</div>
2

As per the documentation:

Stencils should be responsive and stretch to fill the container that they are in.

So your slds-spinner-container is filling the parent container (slds-form--compound) since it has this:

.slds-spinner_container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(9000 + 2);
  background-color: rgba(255,255,255,.75);
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease,visibility 0s;
  transition-delay: 0s,.3s;
}

I would create a parent container for your spinner container like this:

<div class="slds-form--compound ">
    <component content goes here>

    <div class="mySpinner">
      <div class="slds-hide slds-spinner_container"  aura:id="uploadSpinner">
          <div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
              <div class="slds-spinner__dot-a" />
              <div class="slds-spinner__dot-b" />
          </div>
      </div>
  </div>

Where mySpinner is:

.mySpinner { 
  position: relative;
  height: 5rem;
  width: 5rem; 
}

Then try and position that container accordingly.

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.