Form Element: Date Picker with Time

  • Profile Image
    revtony
    Asked on April 11, 2018 at 10:49 AM

    Hello,

    I am having display issues with Date Picker with Time. The Time menus are collapsed and not displaying properly. Please advise on how to fix this. See link below to form.  

    Thank you in advance.

    Michael

  • Profile Image
    Kevin_G
    Answered on April 11, 2018 at 11:51 AM

    Please try injecting the following code to the form: 

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

        width: 25%;

    }


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

        width: 30%;

    }


    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

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

        width: 15% !important;

      }


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

        width: 15% !important;

      }


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

        width: 15% !important;

      }


      span.allowTime-container {

          width: 100%;

      }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    Vanessa Trapero
    Answered on April 11, 2018 at 12:25 PM

    The CSS for datepickers with time got messed up due to Mobile Responsive Widget.


    I have cloned your form and fixed it here: https://form.jotform.me/81004738994464

    If the fix is good, you can clone this one back to your account by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL


    Or, you could just copy the CSS below and inject into your form.


    .form-line[data-type="control_datetime"] 

     .form-sub-label-container {

        width: 30%;

        margin-right: 2%;

    }

    .form-line[data-type="control_datetime"] 

     .form-sub-label-container:last-child {

        width: 6%;

    }

    .form-line .allowTime-container {

      width: 60%;

    }

    .form-line[data-type="control_datetime"] 

     .allowTime-container .form-sub-label-container {

        width: 22% !important;

        margin-right: 3% !important;

    }

    You can use this guide on injecting CSS: How To Inject Custom CSS Codes

  • Profile Image
    revtony
    Answered on April 12, 2018 at 01:55 PM

    Thank you Kevin and Vanessa. I used Vanessa CSS and it worked perfectly!

  • Profile Image
    Vanessa_T
    Answered on April 13, 2018 at 07:51 AM

    That's great @revtony. Glad I was able to help.