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

    DateTime fields showing vertically instead of horizontally on mobile devices

    Asked by enbpubliccampus on June 26, 2016 at 11:07 PM

    I have a time field in my form.  On a computer it shows horizontally as designed.  However, on my mobile device, the fields are stacked vertically.  How can I change this behavior?

    Thanks

     

    Page URL:
    https://www.jotform.com//?formID=61738137554158

    Screenshot
    Mobile devices instead time field mobile device
  • Profile Image
    JotForm Support

    Answered by Boris on June 27, 2016 at 03:13 AM

    The reason that each drop-down of the DateTime field displays like that on mobile devices, is that the containers that hold each of those separate drop-downs are all set to have 100% width - essentially making them take the full width of your mobile device.

    I would recommend applying the following custom CSS to your form, which will affect only mobile device screens larger than 481 pixels and smaller than 640 pixels - which is where this issue seems to exist:

    @media screen and (min-width: 481px) and (max-width: 640px) {
      #cid_9 > .form-sub-label-container {
        width: 10%;
      }
    }

    You can apply custom CSS to your form by following this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know how it goes, and whether this resolved the issue you were having.

  • Profile Image

    Answered by enbpubliccampus on June 27, 2016 at 04:44 PM

    I applied the CSS.  No change.  Tried on my tablet with two different browsers.

  • Profile Image
    JotForm Support

    Answered by Kiran on June 27, 2016 at 06:00 PM

    Please try adding the following CSS to your JotForm.

    @media only screen and (device-width: 768px) {

      #cid_9 > .form-sub-label-container {

        width: 10%;

      }

    }

    I have checked the cloned version of your JotForm using an emulator after applying the above CSS and it displayed fine.

    Please let us know if you need any further assistance. We will be happy to assist.

  • Profile Image

    Answered by enbpubliccampus on June 27, 2016 at 07:57 PM

    Jotform continues to lead the industry in product support.  Thanks for helping resolve that problem!

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 27, 2016 at 10:46 PM

    On behalf of my colleagues, you are welcome! Open a new thread if you need anything else, we will be glad to assist you.