Can't put date fields in one line in mobile

  • escmarc
    Asked 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

    Jotform Thread 877642 Screenshot
  • Charlie
    Replied 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:

    Cant put date fields in one line in mobile Image 1 Screenshot 30

     

    This is how it looks like in mobile:

    Cant put date fields in one line in mobile Image 2 Screenshot 41

     

    Let us know if you need further help on this.

  • escmarc
    Replied on July 12, 2016 at 3:43 AM

    Thanks a lot Charlie, this works great!

  • liyam
    Replied 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. :)