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

  • Profile Image
    24hcarpark
    Asked 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.

  • Profile Image
    Charlie
    Answered 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
    tecladigital
    Answered on January 29, 2015 at 11:28 AM

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

    Thank you

  • Profile Image
    Charlie
    Answered 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.