Date and time field is not mobile responsive?

  • Profile Image
    Eddie2492
    Asked on March 12, 2017 at 01:59 AM

    Hi, I have selected the option to make the form mobile responsive but date and time field is not responsive as you can see in the pic that its missing time field completely.

  • Profile Image
    Eddie2492
    Answered on March 12, 2017 at 07:52 AM

    Its not responsive when the field is shrink.. but its responsive with fill width...

  • Profile Image
    Welvin
    Answered on March 12, 2017 at 08:16 AM

    Can you check now? I've added some custom CSS codes to fix it.

  • Profile Image
    Eddie2492
    Answered on March 12, 2017 at 08:22 AM

    You genius ..... its working perfect now 

    Thanks heaps!

  • Profile Image
    Eddie2492
    Answered on March 12, 2017 at 08:37 AM

    hi, I have another date time field in the form and that field is still behaving the same and not responsive on the mobile device.

     

  • Profile Image
    Charlie
    Answered on March 12, 2017 at 11:11 AM

    Replace your current custom CSS code with this one:

    @media only screen and (max-device-width: 550px){

        #cid_66 > div > span:nth-child(2), #cid_96 > div > span:nth-child(2) {

            width : 28% !important;

            margin-right : 5px !important;

        }

        #cid_66 > div > span.allowTime-container > span:nth-child(1),

      #cid_66 > div > span:nth-child(4),

       #cid_96 > div > span.allowTime-container > span:nth-child(1),

      #cid_96 > div > span:nth-child(4) {

            width : 6% !important;

            margin-right : 5px !important;

        }

        #cid_66 > div > span.allowTime-container > span:nth-child(2),

      #cid_96 > div > span.allowTime-container > span:nth-child(2) {

            width : 25% !important;

            margin-left : 5px !important;

        }

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

            width : 25% !important;

            margin-right : 5px !important;

        }

    }

     

    To inject that custom CSS code, you can follow this guide: https://www.jotform.com/help/75-Customize-Your-Form-Using-Custom-CSS-Codes 

    Let us know if that works.