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

    How to change the width of date time field for mobile device?

    Asked by JBL on February 06, 2017 at 08:02 PM

    The Date field is too wide on mobile devices and the Time displays vertically. Is it possible to correct this?

    Thanks.

    Page URL:
    https://www.jotform.com/build/63205773499163

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 06, 2017 at 10:54 PM

    Hello,

    Please inject the following custom css code in your and that should solve your problem:

    @media only screen and (max-width: 480px){

    #id_7 {

        width: 75%;

    }

    #id_24 {

        width: 75%;

    }

    }

    Please check the screenshot below on how to inject custom css code in form:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by JBL on February 07, 2017 at 12:37 AM

    Hello,

     

    Unfortunately it did not work for me.

    I had another open ticket which was also just resolved so I injected both sets of code. I tried them together, and then separately (in case they conflict). Either way they both don't work.

    My goal is to display the Time Field horizontally and to narrow the Date Field on mobile devices.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 07, 2017 at 02:11 AM

    Hello JBL,

    I have injected the following custom css code in your form and that seems to have fixed this issue:

    @media only screen and (max-width: 480px){

    #id_7 {

        width: 75%;

    }

    #id_24 {

        width: 75%;

    }

    input#lite_mode_7 {

        width: 175px !important;

        min-width: 175px !important;

    }

    }

    I did test your form in mobile device and it seems to display the form correctly. Please check the screenshot below:

    I would suggest you to please test your form again and get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by JBL on February 07, 2017 at 05:16 PM

    I have tried all this morning, but I still cannot get the time to display horizontally.

    If I change the first line to @media only screen and (max-device-width: 768px){ /*tablet*/, it narrows the Date field. However I still cannot get the Time to display horizontally. I have tried changing the width values, added !important, but it still cannot change.

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 07, 2017 at 09:21 PM

    I checked your form on mobile and the time field displays side by side. Did you manage to resolve this?

    If not, you can use this CSS codes. This will make all the time fields in your form to display horizontally on mobile.

    @media screen and (max-width:480px){

    [data-type="control_time"] select {

        width: 70% !important;

    }

    [data-type="control_time"] .form-sub-label-container {

        width: 30% !important;

    }

    }

    Hope this helps!

     

  • Profile Image

    Answered by JBL on February 07, 2017 at 09:45 PM

    No, I am still getting a vertical display. Is it possible for you to go to the live form and inject the codes? Maybe I am doing it wrong?

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 07, 2017 at 10:56 PM

    It is working in your form already when I check it here. I have also made a small adjustment in your CSS so the name field would display nicely on mobile.

    If you are not seeing this changes on your end, please clear your browser's cache.