last day (16 days later) » 

12:29 PM
1
Q: datepicker control not rendering correctly in modal window

TomI have implemented inline editing of date-picker control in ag-grid using Angular 7 application. The ag-grid is on popup modal window. The date-picker controls does popup but renders behind the modal. Not sure why it is happening.I have attached a screenshot to show how it renders. You can also ...

 
Tom
Is it got to do with the z-index
 
yap the z-index of the modal is higher than the datepicker. So increase the z-index of the datepicker container
 
Tom
I have posted what I tried and doesnt work. I am not aware much of jquery
 
the way i do it, is to first check modal z-index. So inspect the modal html in the browser and check what value the z-index is set to. then inspect the datepicker control and see its value. Add a css file and add class same as the ui-datepicker where you override the z-index. Obvisouly make sure your new custom css file is loaded when running the site
 
Tom
The z-index of modal window is 1050 and z-index of the datepicker seems to be 2. What does that mean ? is that the reason why it is not overlaying. But if you see in my code I am trying to apply class ui-datepicker with z-index of 10000. I can see ui-datepicker while inspecting the element. They why is it applying 2
 
12:29 PM
Yes the z-index of the datepicker container must be greater than the z-index of the modal. Also make sure you are applying the z-index to the correct element of the datepicker control. Usually these plugings (ui-datepicker) will render nested html. So inspect the ui datepicker html and set the z-index to the its parent container in the browser, then you can set it via jquery or as i suggested earlier without jquery and just by using css
if you can setup a fiddle i can help you to set the z-index on the correct element. But you should be able to set it yourself= trial and error
 
Tom
1:23 PM
Hi
When I try to provide anything above 1050 in the inspect element mode, the datepicker seems appearing correctly but for some reason my css isn't getting applied at runtime.
<style>
#ui-datepicker-div { position: fixed; z-index: 10000 !important; }
</style>
I have even uploaded the screenshot of how the element looks like when it is rendered on the browser
 

  last day (16 days later) »