-
escmarcAsked on July 7, 2016 at 12:42 PM
Hello,
I set my form to mobile responsive and everything looks great except the date and time fields. Instead of staying each in 1 line (month/day/year in 1 line; HH:MM AM/PM in another line) they both break into separate lines for each subfield.
I searched through all the forums that talked about this but none of the solutions work for me. I also tried the widget 'mobile responsive' but that eliminates all the padding of the app (making everything else look ugly).
Could you please help me solve this? Thanks a lot!
Best,
Marc
Page URL: https://form.jotform.com/61873960286164 -
CharlieReplied on July 7, 2016 at 1:47 PM
Try adding this custom CSS code in your form's CSS tab:
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
/*Adjust each part of the date field to 30% width*/
[data-type="control_datetime"] > div > span
{
width: 30% !important;
}
/* Make each text box of the date field to 90% width*/
[data-type="control_datetime"] > div > span > input
{
width: 90% !important;
}
/*Adjust each part of the time field to 30% width*/
[data-type="control_time"] > div > span
{
width: 30% !important;
}
/*Adjust the select drop down widths to 60%*/
[data-type="control_time"] > div > span > select
{
width: 60% !important;
}
}
You can adjust the width on your own preferences. Now noticed the widths that have 30% width, this means we divided the total of 100% into 3 parts, because each date field and time field have three parts on them. You can change it to 33.33% if you want, but I prefer 30%. You can paste that custom CSS code in your Form Designer Tool->CSS tab:
This is how it looks like in mobile:
Let us know if you need further help on this.
-
escmarcReplied on July 12, 2016 at 3:43 AM
Thanks a lot Charlie, this works great!
-
liyamReplied on July 12, 2016 at 4:42 AM
On behalf of Charlie, you are welcome.
Feel free to get back to us if you have other questions or concerns.
Thanks. :)