Date field is not displaying correctly in mobile view

  • andybelow
    Asked on September 10, 2019 at 8:43 PM

    Hello, 


    In my form I am clicking the "Preview Form" button and am selecting the "Phone" view with the vertical (default) orientation.


    When I scroll down to the "Birth Date" heading I am not able to put anything into the "MM" (Month) field, and it is noticeably smaller in size than the  "DD" and "YYYY" fields.  In addition, I am also able to add more than two characters in the date field, and more than four characters in the year field.


    I tested this live on my phone and encountered the same issues.


    To the best of my knowledge I just selected the default Form Element, and did not manipulate any field sizes or character allotments to prevent inputting in the Month field or allow additional characters in the Date and Year fields.


    Also, I have a question concerning the "reCAPTCHA." Is there a way for only the authentication to be given with a check mark?  In one of my tests, I was asked to pick all the pictures that have (xyz) in them.  I don't want any prospects being subjected to that as it would be an unnecessary deterrent to the form being completed.


    Can you please help?  


    Thank you!

    Jotform Thread 1959360 Screenshot
    Page URL: https://www.jotform.com/build/92527161778163#preview
  • Kiran Support Team Lead
    Replied on September 10, 2019 at 9:49 PM

    Please try adding the following CSS code to the form to display the date field correctly on the mobile screens.

    @media screen and (min-width: 10px) and (max-width: 540px){

    [data-type=control_datetime] .form-sub-label-container:first-child {

        width: 20% !important

    }

    [data-type=control_datetime] .form-sub-label-container:nth-child(2) {

        width: 20% !important

    }

    [data-type=control_datetime] .form-sub-label-container:nth-child(3) {

        width: 25% !important

    }

    [data-type=control_datetime] .form-sub-label-container:last-child {

        width: 10% !important

    }

    li[data-type="control_datetime"] input.form-textbox {

    padding-left: 20px;

    }

    }

    The question related to reCaptcha is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/1959368


    Thank you!