Prevent dialog from overlaying custom razor component

I have a Blazor "progress bar" component that I would like to overlay all other SfDialog components while they're loading their respective data.

The problem is that the dialogs often change their z-index to overlay my progress bar component and I haven't found a way to stop it. I even set the z-index to the maximum allowed value (int max) which still hasn't fixed the behaviour.

Is there an easy way to achieve what I want? I understand that I can use a separate SfDialog component and add that as a child to the other component, however, I'd really like to only have one global progress bar component that gets shown when appropriate.

1 Reply 1 reply marked as answer

IS Indrajith Srinivasan Syncfusion Team December 17, 2020 08:16 AM UTC

Hi Tobias, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. By default, if the ZIndex property is not configured for the SfDialog it will change periodically. You can prevent the z-index from changing, by setting the manual z-index for the SfDiaog using the ZIndex property. Check the below code blocks for reference. 
 
 
<SfDialog ZIndex="1001"></SfDialog> 
 
 
Please let us know if the solution helps, 
 
Regards, 
Indrajith 


Marked as answer
Loader.
Up arrow icon