Z-index Dialog

[Pavel]

Hello,

I have a dialog1 that open dialog2 on submit.

I would like the z-index of dialog1 to be higher than dialog 2 even when the second dialog is triggered. So dialog 1 should always be on top even if other dialogs are opened after.

I have tried setting the z-index on dialog1  to ZIndex="10000000" but that didnt work and dialog1 gets covered up by dialog2 when its opened. I also tried setting the z-index in the css class of the dialog but also didn't work.

I have attached a sample

Attachment: DialogSample_5128dc87.zip

[Vinothkumar Yuvaraj]

Hi Pavel,

We achieved your requirement by using the ZIndex property. Please see the following code and attached sample for your reference.

Index.razor

<SfDialog ZIndex="10001"> </SfDialog>

SecondModal.razor

<SfDialog ZIndex="10000"> </SfDialog>

API Link : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_ZIndex

Please let us know if you have any concerns and also see the attached video.

Regards,

Vinothkumar

Attachment: Dialog_749f5506_a67f9f9c.zip

[Pavel]

Hello,

I have one dialog1 at the root level that I always want to stay on top. If I have 60 other dialogs, do I have to go in and put a lower zindex value than dialog1 on all of the 60 other dialogs?

Is there a way to only set the zindex value on dialog1 and have it stay on top all of other dialogs?
for example is there a value i could set on dialog1 that will by default higher than other modals with no zindex set.

[Vinothkumar Yuvaraj]

Hi Pavel,

To clarify, by default, our Dialog component is positioned with a higher z-index than all elements on the web page. This is because the active element gets focused when the Dialog component is opened and has the higher z-index value. However, if you have a scenario where you wish to change the z-index of the Dialog components, such as ensuring that the first dialog is always on top, you can set a lower z-index on the second dialog as per our previous update.

You no need to specify z-index for all your dialog component. Only dialog within dialog requires a lower z-index than the root-level dialog. 

We would appreciate it if you could provide us with more information about your specific use case or scenario and why you would like the first dialog to always be on top. This will help us better understand your needs and provide you with a more tailored solution.

[Pavel]

I have an error display dialog at the root level. Errors that happen are logged here. The error dialog is used on every webpage and should always be on top.

User clicks on dialog2. Before the second dialog is opened, an error occurs, is logged and added to the error manager dialog. The error manager dialog opens briefly but is then covered up by dialog2. Error manager should be on top until the user closes the dialog. Error manager dialog being covered up without acknowledgement from user should not happen.

Therefore since the error manager dialog is on every page and should always be on top, I must set a z-index value on the error manager, and set a lower z-index value on any other dialog in the application?

[Vinothkumar Yuvaraj]

Hi Pavel,

To achieve this, you will need to set a higher ZIndex value on your root level dialog and set a common lower ZIndex value on all the remaining 60 dialogs. You can use a common variable to set the same ZIndex value for the remaining dialogs.

We have included a sample for your reference below. In the sample, we have set a ZIndex value of 10001 for the index.razor page dialog (root level dialog) and a ZIndex value of 10000 for the second and third dialogs (remaining 60 dialogs). Please see the attached sample for your reference.

Attachment: DialogSample_5128dc87_74d5d851_2ac9948d.zip