4

I have a simple lightning spinner in LWC

<lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>

but this doesn't cover the entire screen as shown in the below image. enter image description here

So I updated the spinner as below

<lightning-spinner class="slds-is-fixed" alternative-text="Loading" size="small" variant="brand"></lightning-spinner>

Added class="slds-is-fixed" to the spinner as shown in the above code snippet and bingo it is working as expected and covering the whole screen but in the mobile phone it is still the same, it still not covering the whole screen(in mobile I cleared the cache, logged out, restarted the application and logged in back but still it is not covering the whole screen but on desktop, it works as expected. In google chrome desktop browser if I choose mobile view then it works expected but in actual mobile phone its not) I would highly appreciate it if someone would help me to resolve this issue on mobile view.

2
  • I think the lightning spinner is supposed to cover the full screen without adding any class. By default, its position is set to absolute. It might be cause by the code around the spinner. Commented Apr 14, 2021 at 14:56
  • Thank you for your response, but trust me there is nothing around the spinner it is just under the template tag.
    – gs650x
    Commented Apr 14, 2021 at 14:58

1 Answer 1

6

Try wrapping the spinner and your component markup in a element or div having class slds-is-relative.

2
  • Thank you for your answer, this is working as expected in mobile view but is there any other way instead of wrapping our whole component with the div tag?
    – gs650x
    Commented Apr 15, 2021 at 4:48
  • 1
    We figured out this trick or approach when we first moved our classic application to lightning aura component. This was the only way to do this that we found, which behaves consistently with standard screen, but comes up with a minor overhead of wrapping the whole component and spinner with a div having that class.
    – Raul
    Commented Apr 15, 2021 at 7:54

You must log in to answer this question.

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