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

    Is there a way to enlarge DateTime popup Calendar?

    Asked by MaidCrew on November 27, 2016 at 09:53 AM

    Hi... I'm wondering if there's CSS for increasing the size of the pop-up Calendar for the DateTime picker while using Lite-Mode?

    When using on a smart-phone / mobile, the calendar is a little small for being able to tap the preferred date.

    I'd say it should render at about 50% larger than it does currently.

    Is that possible?

    Thanks.

    Page URL:
    https://form.jotform.com/61794097469170

    popup calendar datetime picker size Mobile format enlarge calendar datetime litemode
  • Profile Image
    JotForm Support

    Answered by Nik_C on November 27, 2016 at 10:44 AM

    Yes there is, to increase please paste the below CSS in your Custom CSS field:

    .calendar.popup {

    width:250px;

    height200px;

    }

    .calendar table {

    width:250px;

    height200px;

    }

    You can adjust width and height as you wish, just make sure that they are the same for table and for popup class.

    If you have any further questions please let us know.

    Thank you!

  • Profile Image

    Answered by MaidCrew on November 27, 2016 at 11:22 AM

    Thanks for the rapid response! Greatly appreciated.

    One last question on the calendar adjustment(s)....

    How would I then change the text size? I tried adding/applying font-size attribute into the prev css you provided but that didn't work.  I'm looking to enlarge both the month/year title bar as well as the day of the week row and each of the dates.

    Thanks again, y'alls assistance is a HUGE help!

  • Profile Image

    Answered by MaidCrew on November 27, 2016 at 11:34 AM

    Also... just discovered, making the CSS adjustment causes a shadowed box / ghost box to remain behind. In trying this on other forms, I've found that the ghost box also blocks any underlying input fields.  Any way to remove that?

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 27, 2016 at 01:16 PM

    If you want to increase the font size of the calendar, inject the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    div.calendar td, div.calendar th {

        font-size: 20px;

    }

    Result:

    Could you please share a screenshot of the shadowed box you are referring to? https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum 

    Also, indicate the form you are referring to, we will be glad to assist you.

  • Profile Image

    Answered by MaidCrew on November 27, 2016 at 02:09 PM

    Thanks for help with the code.  As for the ghost / shadow box, I should clarify.

    In my DateTime Options settings, I have Calendar Pop-Up toggled to "ON" in order to "Display a date picker when interacting with the field". 

    If you click the tiny calendar icon, the calendar-popup renders and disappears properly as your test revealed.

    If you click into the actual input field as if you were going to type in the date, the calendar pops up BUT then once you've selected a date, the form is left with a shadowed, transparent (ghost) box that layers over all other inputs.... preventing interaction with subsequent questions / fiil-ins.

    And before I forget ... ALSO

    Since I selected to have the Date Picker show when interacting with the field (and by doing so, user can tap a date to select) is there a way to prevent the keyboard on a mobile phone from activating when someone interacts with the date-field? If a calendar / date picker pops up when interacting with the input field, it is bothersome and redundant to have to deal with the keyboard on the mobile phone screen.

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 27, 2016 at 04:09 PM

    Remove the following injected code from your form: https://form.jotform.com/61794097469170 

    .calendar.popup {

    width:250px;

    height:200px;

    }

    You can test my cloned version: https://form.jotform.com/63316269298971  

    Your inquiry regarding the mobile view will be addressed on the following thread: https://www.jotform.com/answers/998461 

     

  • Profile Image

    Answered by MaidCrew on November 27, 2016 at 04:26 PM

    Thanks Much BDavid! I'm grateful for all your help today.

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 27, 2016 at 04:40 PM

    Welcome! Open a new thread if you need anything else. :-)