What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Date Time Field: Immovable shadow problem

    Asked by resortvacations on October 25, 2016 at 02:16 PM

    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

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

    problem form field Glitch the form
  • Profile Image
    JotForm Support

    Answered by Kevin_G on October 25, 2016 at 05:29 PM

    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. 

  • Profile Image

    Answered by resortvacations on October 25, 2016 at 08:07 PM

    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:

    div.calendar {
        color: #000;
        font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    }
     
    When I remove it from the rendered source code, it works fine. But I don't know how to code it so that the widget doesn't render it into the element at runtime.
    Thanks.
  • Profile Image
    JotForm Support

    Answered by seth on October 26, 2016 at 03:03 AM

    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.

  • Profile Image

    Answered by resortvacations on October 26, 2016 at 12:59 PM

    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.

  • Profile Image
    JotForm Support

    Answered by seth on October 26, 2016 at 03:36 PM

    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.

  • Profile Image

    Answered by resortvacations on October 27, 2016 at 01:52 PM

    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?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on October 27, 2016 at 03:43 PM

    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 

     

  • Profile Image

    Answered by resortvacations on October 27, 2016 at 04:25 PM

    It works. Awesome, thank you!