0

I'm trying to get a spinner and to grey out the UI in a Lightning Quick Action (using web components). When I add the spinner, it greys out the modal but also goes to the top and bottom of the screen. How do I get it to just grey out the modal?

This is my code:

<lightning-quick-action-panel title="Quick Action"> <div class="spinner"> <template if:true={isLoading}> <lightning-spinner alternative-text="Loading" variant="brand" size="medium"></lightning-spinner> </template> </div>

If I add slds-is-relative anywhere, it doesn't help, and actually stops the modal being greyed out. Is there a fix for this?

Improve this question
2
  • I know this post is old, but did you ever find a solution for this? Commented Apr 10 at 21:53
  • 1
    I don't think we did sorry Commented Apr 11 at 11:01

1 Answer 1

Reset to default
1

You should surround your spinner div with a container (such as a div) using the slds-is-relative class.

<template> <div class="slds-m-around_large"> <p if:true={isLoaded}>Content has been loaded.</p> <div if:false={isLoaded} class="slds-is-relative"> <lightning-spinner alternative-text="Loading..."></lightning-spinner> </div> </div> </template>
Improve this answer
1
  • Sorry that didn't work. The spinner was not centered and did not grey out the UI. Commented Nov 30, 2021 at 14:40

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.