What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can't put date fields in one line in mobile

    Asked by escmarc on July 07, 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

    Screenshot
    Mobile can't line date field
  • Profile Image
    JotForm Support

    Answered by Charlie on July 07, 2016 at 01: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.

  • Profile Image

    Answered by escmarc on July 12, 2016 at 03:43 AM

    Thanks a lot Charlie, this works great!

  • Profile Image
    JotForm Support

    Answered by liyam on July 12, 2016 at 04:42 AM

    On behalf of Charlie, you are welcome.  

    Feel free to get back to us if you have other questions or concerns.

    Thanks. :)