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

    Date Picker Hours and Minutes Pushed Farther To The Right on Mobile Display

    Asked by 24hcarpark on January 29, 2015 at 07:20 AM

    Hi

     

    Can you help me with this? I'm having problems with date piker field when viewing on a mobile device. Can you see on the form link.

    The time dropbox are "pushed" to the right outside the screen.

     

    I have enabled an disabled the responsive option on the form, but Im having that problem any way.

    Page URL:
    http://form.jotformeu.com/form/50283055322345?

    problem Mobile form link dropbox
  • Profile Image
    JotForm Support

    Answered by Charlie on January 29, 2015 at 11:19 AM

    Hi,

    Upon checking your form, I see what you meant. I've cloned it for testing purposes and added a custom CSS code on it. Here's the edited cloned form: http://form.jotformpro.com/form/50283974324963

    You can add this to your Form Designer->CSS tab.

    //First date field

    #cid_1 > span:nth-child(4) > span:nth-child(1) {

        width: 40px !important;

    }

    #cid_1 > span:nth-child(4) > span:nth-child(2) {

        width: 40px !important;

    }

    #cid_1 > span:nth-child(4) > span:nth-child(3) {

        width: 40px !important;

    }

    #cid_1 > span:nth-child(5) {

        width: 20px !important;

    }

    //Second date field

    #cid_3 > span:nth-child(4) > span:nth-child(1) {

        width: 40px !important;

    }

    #cid_3 > span:nth-child(4) > span:nth-child(2) {

        width: 40px !important;

    }

    #cid_3 > span:nth-child(4) > span:nth-child(3) {

        width: 40px !important;

    }

    #cid_3 > span:nth-child(5) {

        width: 20px !important;

    }

     

    To adjust the spacing between them, just edit the widths and see what display works for you. Let us know if you need more information on this.

    Kind regards.

     

  • Profile Image

    Answered by tecladigital on January 29, 2015 at 11:28 AM

    It works fine. But this should be responsive by default.

    Thank you

  • Profile Image
    JotForm Support

    Answered by Charlie on January 29, 2015 at 12:35 PM

    Hi,

    Yes, it seems that the formatting of the date picker adjusts too much on it's width on the hours and minutes section part when in mobile. The custom CSS code should still work on any of the mobile devices' display.

    Thank you.