How to make spinner always on top, over dialog boxes

Question

Hello,I have one spinner on my site that is enabled whenever there is a pending HTTP request. The problem is, when a open a dialog box, it will set its Z-value above the spinner. Is there a way to have the spinner always be on top? I tried having the spinner also raise its z-value, but the dialog box z-value raising code always seems to run afterwards.

Vinitha Jeyakumar · Answer

Hi James, 
 
 
Greetings from Syncfusion support 
 
 
We have validated your query “How to make spinner always on top, over dialog boxes” 
 
We have created a sample to meet your requirement with a Dialog and Spinner which shows above the dialog box. You can set the target div for the Spinner which defines the container where you want to show it and always make sure that the Spinner container takes place above the Dialog container on your page. We have also prepared a sample for your reference, 
 
Sample: https://stackblitz.com/edit/angular-qh2vva?file=app.component.ts 
 
Please check the above sample and let us know if it satisfies your requirement. 
 
Regards, 
Vinitha

Nikolay Sitnikov · Answer

Hi team, found this solution to the same issue as stated by original poster, but it doesn't work. Your example show spinner behind dialog box, not above it. Any updates to this? How can I get spinner to be above dialog box? popups version 19.4

Vinitha Jeyakumar · Answer

Hi Nikolay,

The shared sample in our last update is working fine as per the requirement to show spinner above the Dialog control. we have also prepared video illustration for your reference.

Sample: https://stackblitz.com/edit/angular-qh2vva-dfsagq?file=app.component.html

Please share us with your exact issue and your requirement for further validation.

Regards,

Vinitha

Attachment: Vid_Spin_9302a262.zip

Tom Povey · Answer

No, the spinner is not on top of the dialog. Your video doesn't even show it on top of the dialog. Clearly we mean the z-index of the spinner, not the x/y placement.

Kokila Poovendran · Answer

Hi Tom Povey,We apologize for any inconvenience you may have experienced. After reviewing your query, we have taken steps to resolve the issue you encountered with the spinner not appearing above the dialog.The problem you described, where the dialog box was appearing above the spinner due to z-index conflicts, has been successfully addressed by setting a higher z-index value for the spinner component. Here's the code snippet to implement this solution:

.e-spinner-pane {
    z-index: 1001;
  }

In this code, we've assigned a z-index of "1001" to the spinner, ensuring that it has a higher stacking order compared to the dialog.To provide further assistance, we've also prepared a sample code snippet that demonstrates this solution in action. You can access the sample by clicking on the following link:Sample: https://stackblitz.com/edit/angular-qh2vva-wuxdxt?file=app.component.html,app.component.css%3AL7Please review the sample and implement the suggested changes in your application. If you encounter any additional issues or have further questions, kindly reach out to us for assistance.Thank you for bringing this matter to our attention, and we appreciate your patience as we worked to resolve it.