1. Home
  2. Forum
  3. Angular - EJ 2
  4. Schedule Modal z-index error

Schedule Modal z-index error

The schedule widget is incorrectly placing the edit modal in the background. Something to do with z-index perhaps. this screenshot is from your own online demos.



Attachment: Image_2_6c00d674.zip

4 Replies
JT jon thomas August 1, 2018 02:33 AM UTC

I'm no css export, but i cleared the z-index from the injected modal element div.e-dlg-container > div.e-dlg-overlay and it now displays correctly inline

VS Velmurugan S Syncfusion Team August 1, 2018 12:25 PM UTC

Hi Jon, 

Thanks for Contacting Syncfusion support. 

We would like to inform you that, we have checked the reported scenario in our online samples with all the supported browsers and the dialog is displaying properly without any z-index issue. Please find the working sample video demo from the following location. 


Kindly check with the above video demo, if you still facing the same issue revert back to us with some more details like issue reproducing browser information with its version, system configuration (i.e. screen resolution). The information provided by you will be more helpful for us to analyze the issue further and provide you the possible solution. 

Regards, 
Velmurugan 


JT jon thomas August 1, 2018 11:09 PM UTC

I just tried the same URL as your video, and got the same result. My browser is Chrome Version 68.0.3440.84 (Official Build) (64-bit).

Within a test angular 6 component, i got it to work with 

styles: [`
.e-dlg-overlay { z-index: auto !important; }
`],
encapsulation: ViewEncapsulation.None,

Attachment: Image_4_7cb3d4c9.zip

VS Velmurugan S Syncfusion Team August 2, 2018 02:52 PM UTC

Hi Jon, 
 
We have checked the reported issue in the same online sample in our end with the mentioned chrome browser version (68.0.3440.84 (Official Build) (64-bit)) and the dialog is displaying properly without any z-index issue as shown in the following screenshots. Also, we have prepared the Angular sample and checked the same and dialog is displaying properly in that sample. Please refer to the working sample from the following location. 
 
 
Screenshots: 
Online Sample Screenshot: 
 
 
Angular Sample Screenshot: 
 
 
 
Kindly check with the above sample, and if you still face the same issue, kindly revert back to us with some more details like complete schedule rendering code or reproduce the mentioned issue in the above sample. The information provided by you will be more helpful for us to analyze the issue further and provide you the possible solution.  
 
Regards,  
Velmurugan

Loader.
Up arrow icon