Date/time picker behind modal window.

Topic: Date/time picker behind modal window.

gdw96 free asked 3 years ago

Hi, since MDB 3.5.0 release my datepickers are behind my modals.

I change the z-index for the moment.

Dawid Wajszczuk staff commented 3 years ago

Hi. Could you please provide more details to your issue? Screenshots and sample code will help a lot. Thanks.

gdw96 free commented 3 years ago

I can't make snippets with version 3.5 but I don't see the point of it.

I have a site project with modal windows in which there are forms including datepicker. Everything was working fine, I upgraded from MDB 3.4.0 to 3.5.0 and my datepickers were no longer displayed above (on front) the modal windows but below (behind).

I tried with timepicker and datetimepicker, the problem is the same. In version 3.4.0 it is displayed above and in version 3.5.0 it is displayed below.

To fix this problem while waiting for you to do it officially I have increased the z-index from .datepicker-backdrop; .timepicker-modal to 1094 and .datepicker-modal-container; .time-picker-wrapper to 1095. That's all.

But, if you really want, I take the time to show you :https://ibb.co/RDfBV2Z https://ibb.co/N9TbtwD https://ibb.co/Byt6q7Q

If you're pfussy, here's the same thing with MDB vanilla (without any modification): https://ibb.co/KhTVWt4 https://ibb.co/PmsbfVX https://ibb.co/yXFr4S3

I can't make snippets with version 3.5 but I don't see the point of it.

I have a site project with modal windows in which there are forms including datepicker. Everything was working fine, I upgraded from MDB 3.4.0 to 3.5.0 and my datepickers were no longer displayed above (on front) the modal windows but below (behind).

I tried with timepicker and datetimepicker, the problem is the same. In version 3.4.0 it is displayed above and in version 3.5.0 it is displayed below.

To fix this problem while waiting for you to do it officially I have increased the <code>z-index</code> from <code>.datepicker-backdrop</code>; <code>.timepicker-modal</code> to <code>1094</code> and <code>.datepicker-modal-container</code>; <code>.time-picker-wrapper</code> to <code>1095</code>. That's all.

But, if you really want, I take the time to show you :<a href="https://ibb.co/RDfBV2Z" target="_blank" rel="nofollow">https://ibb.co/RDfBV2Z</a><a href="https://ibb.co/N9TbtwD" target="_blank" rel="nofollow">https://ibb.co/N9TbtwD</a><a href="https://ibb.co/Byt6q7Q" target="_blank" rel="nofollow">https://ibb.co/Byt6q7Q</a>

If you're pfussy, here's the same thing with MDB vanilla (without any modification):
<a href="https://ibb.co/KhTVWt4" target="_blank" rel="nofollow">https://ibb.co/KhTVWt4</a>
<a href="https://ibb.co/PmsbfVX" target="_blank" rel="nofollow">https://ibb.co/PmsbfVX</a>
<a href="https://ibb.co/yXFr4S3" target="_blank" rel="nofollow">https://ibb.co/yXFr4S3</a>

Please insert min. 15 characters.

Add comment

Dawid Wajszczuk staff answered 3 years ago