Modal dialog Z-index issues

[Alberto Bonfiglio]

Hello,

the dialog Z-index appears to be set incorrectly when the grid invokes it. It happens on all dialogs (edit and delete)

this is the html:

<div class="e-dlg-container e-dlg-center-center" style="z-index: 2147483647; display: none; position: absolute;">

  <div id="grid_120187176_0EditConfirm" class="e-dialog e-dlg-modal e-control e-popup e-popup-close" role="dialog" style="z-index: 2147483647; width: 320px; left: 0px; top: 0px; max-height: 541px; position: relative;" aria-describedby="grid_120187176_0EditConfirm_dialog-content" aria-modal="true" tabindex="-1">

       <div class="e-dlg-content" id="grid_120187176_0EditConfirm_dialog-content">

          <div>Are you sure you want to Delete Record?</div>

       </div>

       <div class="e-footer-content"><button type="button" class="e-control e-btn e-primary e-flat">OK</button><button type="button" class="e-control e-btn e-flat">Cancel</button></div>

     </div>

     <div class="e-dlg-overlay" style="z-index: 2147483647; display: none; position: absolute;"></div>

</div>

I am using the latest build ^16.2.47 but the behaviour existed since 16.2.45

[Karthikeyan Viswanathan]

Hi Alberto,   

  

Thanks for contacting Syncfusion Support.   

  

Based on your shared code, we suspect that the issue is due to maximum value of Z-Index set in your page’s element. In general, JavaScript allow the maximum Z-Index value as 2147483647.   

   

For a control behavior when it opens the Dialog, the control finds the maximum value of Z-Index in body. For example, if you set 1000 as maximum Z-Index on anyone of the element in body means the Dialog find the maximum value and set more than one of maximum value (1001) itself.  if you use the maximum Z-Index value (2147483647) then the control will raise this issue.   

   

So, please ensure the below cases:   

• Do you install any extensions in the browser to affect z-index value?
• Ensure the page with private window like incognito tab.
• Ensure whether any element has maximum z-index in a page.

 

Regards,   

Karthikeyan V.  

[Alberto Bonfiglio]

Hi, 
looks like you may be right in it being a browser issue. I have the latest chrome and has the issue but firefox and opera do not. So it may be an extension in chrome. The only extensions I have installed are hangouts, augury, volume manager and google docs offline. Volume manager seems to possibly be the culprit. 

That said, I think that the overlay code may need to take into consideration that some extensions may alter the zindex of the page and adjust accordingly. We do nt always have control on the extensions users install.

Anyhow. thank you for the prompt response and help in resolving the issue. You guys rock!

[Karthikeyan Viswanathan]

Hi Alberto, 

 

We are glad to hear that your issue has been resolved.     

 

Regards,  

Karthikeyan V.  

[Alejandro Perez]

what if....... you provide a working appendTo 🤔

[UdhayaKumar Duraisamy]

You can achieve the same effect using the target property in Syncfusion Dialog. It works like appendTo by allowing you to specify where the dialog should be rendered in the DOM.