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

    Why are the fields for the date picker so small?

    Asked by PriestleyManagement on August 16, 2016 at 11:29 AM

    I have added a date picker on our Architectural Request form. The fields are very small and when you enter the year, you cannot see the entire entry. How do I make the fields bigger?

     

    Thank you in advance for your assistance.

    Page URL:
    http://priestleymanagement.com/online-forms/(ArchitecturalRequestFormt<br/>ab)

    Screenshot
    date picker datetime field
  • Profile Image
    JotForm Support

    Answered by Welvin on August 16, 2016 at 12:50 PM

    It seems that you've tried changing some of the text box styles, but the date field has been affected causing the issue. 

    I've fixed it for you by adding the following custom CSS codes to your form:

    [data-type="control_datetime"] span[style*="white-space"] > .form-sub-label-container:first-child {

        display : none;

    }

    [data-type="control_datetime"] .form-input> span:nth-child(3) {

        width : 24%;

        margin-right : 0;

    }

    [data-type="control_datetime"] .form-input> span:nth-child(3) input {

        width : 100%;

    }

    [data-type="control_datetime"] .form-input> span:nth-child(4) {

        width : 6%;

    }

    [data-type="control_datetime"] .form-input span:nth-child(5) {

        padding-top : 10px;

    }

    [data-type="control_datetime"] .form-input .form-sub-label-container {

        width : 30%;

        margin-right : 0;

    }

    [data-type="control_datetime"] .form-input .form-sub-label-container input,

    [data-type="control_datetime"] .form-input .form-sub-label-container select {

        width : 80%;

    }

    [data-type="control_datetime"] .form-sub-label-container .date-separate {

        visibility: visible;

    }

    Here's how to check the codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by PriestleyManagement on August 16, 2016 at 04:47 PM

    Thank you so much for your assistance.