Form Element: Date Picker with Time

  • 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

    Jotform Thread 1441486 Screenshot
  • Kevin Support Team Lead
    Replied 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. 

  • Vanessa Trapero
    Replied 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

  • revtony
    Replied on April 12, 2018 at 1:55 PM

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

  • Vanessa_T
    Replied on April 13, 2018 at 7:51 AM

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