-
24hcarparkAsked 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.
-
CharlieReplied 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.
-
tecladigitalReplied on January 29, 2015 at 11:28 AM
It works fine. But this should be responsive by default.
Thank you
-
CharlieReplied 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.