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

  • 24hcarpark
    Asked on January 29, 2015 at 7: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.

  • Charlie
    Replied 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;

    }

    Date Picker Hours and Minutes Pushed Farther To The Right on Mobile Display Image 1 Screenshot 20

     

    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.

     

  • tecladigital
    Replied on January 29, 2015 at 11:28 AM

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

    Thank you

  • Charlie
    Replied 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.