We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Spinner not working correctly

Hi.

I'm using spinner so that it fills the entire screen when called.

However, I'm facing some problems:

1) Spinner does not show on top of header and footer

2) When displayed, If I scroll it does not show on the hidden part of the window

3) If called from dropdown click event, the content of the dropdown remains accessible even with spinner showing

Would you please help me?

Thank you.

P.S. - I've attached the project (VS2022/NET6) along with a video showing the behavior described above.


Attachment: SfBlazorApp_da8534b.zip

2 Replies 1 reply marked as answer

VY Vinothkumar Yuvaraj Syncfusion Team October 5, 2022 09:53 AM

Hi Paulo,


Greetings from Syncfusion support.


Query #1: Spinner does not show on top of header and footer.

You can solve your problem by providing a higher ZIndex value on the SfSpinner component. Please see the code below for your convenience. 

MainLayout.razor

<SfSpinner @bind-Visible="@SpinnerVisible" CssClass="e-spin-overlay" ZIndex="100000">

</SfSpinner>


Query #2: When displayed, If I scroll it does not show on the hidden part of the window.

The above-reported issue will be resolved by adding the e-spin-overlay position set as "fixed."

Index.razor

 .e-spinner-pane.e-spin-overlay {

     positionfixed;

}


Query #3: 
If called from dropdown click event, the content of the dropdown remains accessible even with spinner showing Would you please help me?


You can set a z-index value on a dropdown list popup element like below.

Index.razor

.e-ddl.e-control.e-lib.e-popup.e-popup-open{

     z-index : 1000 !important;

}


Please check the attached sample and let us know if you have any concerns.


Regards,

Vinothkumar Y


Attachment: SfBlazorApp_3eba0c4e.zip

Marked as answer

PP Paulo P October 5, 2022 10:41 AM

The issues are fixed.

Thank you very much.


Loader.
Live Chat Icon For mobile
Up arrow icon