Spinner not working correctly

[Paulo P]

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

[Vinothkumar Yuvaraj]

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 {

     position: fixed;

}

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

[Paulo P]

The issues are fixed.

Thank you very much.