Date Time Field: Immovable shadow problem

My form is here:

https://form.jotform.com/resortvacations/book

If you tap to activate the calendar popup, then enter text into the date field, the calendar popup won't go away and blocks any further input for any area of the form that it covers- and it remains until you refresh the page.

The issue is documented here:

http://stackoverflow.com/questions/9427073/jquery-datepicker-is-stuck-open-if-label-is-clicked-from-open-state

and here:

https://www.gravityhelp.com/forums/topic/prevent-keyboard-popup-on-datepicker-for-mobile-devices

But..... as Jotform is frustratingly only available online, there is no way to change this, according to the above 2 URLs. 

Here is a screenshot:

Please help, thank you kindly.

http://stackoverflow.com/questions/9427073/jquery-datepicker-is-stuck-open-if-label-is-clicked-from-open-state

That seems to be the <li> element where the date field is added since it has the similar width that the widget; however, I have tested your form and I could not replicate the problem on my end, here is a screenshot: 

Could you please test in a different browser? 

If the issue still persists, please let us know which browser you're using as well as the device where you're testing your form, we will be glad to perform some tests on our end. 

Looking forward to your response. 

You can replicate it by tapping in the date input field and then entering text with any keyboard- then tap outside the field. The offending element is this:

Hello,

I am sorry but I couldn't replicate the issue hence I can't go further to investigate the issue. As you said I clicked on date picker, then used my keyboard and clicked outside the date picker. However there is no issue appearing on my side. Could you please try to update your browser. I checked your form in Chrome, Firefox and Safari web browsers. Here is what I see:

Also I realized that your date picker has some other style on your screenshot. This could be a consequence of your old version of Firefox browser or your operating system.

Surprisingly, I couldn't replicate the issue on Windows 7 and 10, on Firefox 48, 49 and 51.

Could you please give us additional details about your computer and browser setup? Also could you tell us that if you use this form embedded to another web site? If so please give us the url of the web site so we could investigate the issue further.

Awaiting your response.

Hi, thanks for the reply. I changed to a different date picker because I couldn't wait any longer. This is not ideal, because the old one had the ability to restrict the days on the calendar, which was a great feature, but the side effect was that the popup would open and the box would remain. I will put it back on there so you can see what I mean. Just click in the text field for the date picker and then click anywhere beside the calendar popup and the empty box will remain where the calendar popup was.

Hello,

Thank you for showing us the issue on your form. I found out the CSS propety you need. Could you please write this code 

.calendar.popup{

box-shadow: none !important;

}

Here is the result:

I think you know how to inser CSS code since you have some CSS code on your form. If you need help on this please contact us again.

Also you are welcome to ask other issues, we are happy to help you.

Cheers.

Actually, the problem is still there. The box is still there, only it is invisible. But the issue is that you can't click on anything that it covers until you refresh the browser. So, nothing underneath it is clickable. Any suggestions?

I have checked your form and I can see that the issue is still there, although the shadow has disappeared the box still is on that place and does not allow to click other fields below it. 

Upon checking your form I could see it happens because of this CSS code  that you have injected to your form: 

.calendar.popup {

    width : 300px !important;

    height : 280px !important;

    font-size : 18px !important;

}

The "!important" added to the width and height forces the calendar to have always the same proportions no matter if it is hidden or not, the date field works with a script that automatically hides all the elements in it and avoids the inconveniences you're currently experiencing with your form. 

The field proportions dynamically change and setting them up fixed will end in the filed covering other fields, the same you already noticed. 

I have removed that code from a cloned form of yours and it works now, please take a look here: https://www.jotform.com/63006511172948 

It works. Awesome, thank you!