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

    Forms are not displaying/fitting properly on mobile devices

    Asked by browningreagle on May 24, 2016 at 03:32 PM

    I noticed it first with this form: https://form.jotform.com/61386211062144

    I'm still looking into the issue with other forms we've got, but I figured I'd start with this one since it's the most recent, as well as most advanced (widgets, custom CSS, etc).  I've added the Mobile Responsive widget, and tried adding the following code below all Custom CSS:

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

    #id_14, #id_16, #id_34 {

      float: none;

      width: 100%;

      left: 0;

      top: 0;

    }}

     

    Unfortunately, it only moved everything that wasn't showing in the right column over top of the fields in the left column.  I've set two columns for the form, and have used Custom CSS to re-position several fields so the form looks/flows better.

    I've noticed that the Configurable List widget is also affected, as it's simply cut off.  There's no way for me to scroll to the right of the form.  Landscape view is a little better, but portrait is a complete mess.

    Please let me know if you have any recommendations, or need further information.  Thanks!

     

    mobile form mobile layout
  • Profile Image
    JotForm Support

    Answered by Mike on May 24, 2016 at 04:39 PM

    You can try with inherit CSS value to reset positioning.

    Example:

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

        #id_14, #id_16, #id_34, #id_35 {

            position : inherit !important;

            margin: inherit !important;

        }

        .form-line {

            padding-left: 12px !important;

            padding-right: 12px !important;

        }

    }

    You may also need to reset width parameters in the same manner with inherit value.

    If you need any further assistance, please let us know.

  • Profile Image

    Answered by browningreagle on May 24, 2016 at 05:57 PM

    EXCELLENT!  Thank you Mike!  This is definitely a step in the right direction.  Correct me if I'm wrong, but is the line @media screen and (max-width:480px){  pretty much saying that any of the coding included in the { } brackets only applies when the form is viewed on mobile devices? The "State" box in the address fields hangs a little lower than "City" & "Zip Code", so is all I need to do is add a couple lines of code in this section?

    Would this same code apply towards fixing the Configurable List widget appearance on mobile devices?  You can see what I mean by answering "Yes" to the last question on the first page of this form, and another field pops-up which is a Configurable List that's cut-off.  I tried adding #id_20 to the code, but nothing happened (of course it can't be that simple).  Should I add this code to the Configurable List's custom CSS?  Or will this require something entirely different?

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Mike on May 24, 2016 at 07:33 PM

    Yes, the CSS added to the @media screen and (max-width:480px){ ... } will only be applied to the mobile devices (screen width equal or smaller than 480 pixels).

    Unfortunately, there is no some generic CSS available to fix configurable list layouts on the mobile devices. The workaround that may work is described in the following thread.

    How to control the width of each column in the Configurable List widget

    The CSS will need to go directly to the widget's Custom CSS section.

    If you need help with the CSS code we can try to look further into this.

  • Profile Image

    Answered by browningreagle on May 25, 2016 at 12:46 PM

    Hmmm...  I guess the only way to really make the Configurable List fit is to move the input boxes around.  Unfortunately, the headers kinda throw the appearance off a bit when the next row is added, like so:

    Is it possible to make it so that any row after the first row will have the Email & Relationship fields moved up so there isn't a gap?  The only workaround I've figured out so far is removing the Email & Relationship headers, but I'd prefer to have headers for all five fields if possible.

    OR, is there a way to make the form horizontally scrollable on mobile devices?

    Thanks again for your help Mike!

  • Profile Image
    JotForm Support

    Answered by Mike on May 25, 2016 at 02:26 PM

    You are welcome.

    What we can try is to hide the column labels and replace them with CSS labels (based on 'before' pseudo-element) on mobile form.

    Here is the CSS for configurable list:

    http://pastebin.com/raw/qyD0RvTa

    Thank you.

  • Profile Image

    Answered by browningreagle on May 25, 2016 at 04:02 PM

    Thanks again Mike!  I just needed to make a few tweaks to the code, but it looks much better now.  However, I noticed that I'm going to have to make similar adjustments for phones using landscape orientation.

    What should I change the @media max-width to in order to make these changes?  And will having two groups of @media coding interfere with each other all?

    UPDATE: I just checked the form using my phone, and it's perfectly fine in both portrait & landscape orientations.  I was basing what I said above on the Design Mode Preview screen for phones.  I think everything looks good for now, but I'll let you know if anything else pops up.

    Thanks again!

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 25, 2016 at 05:25 PM

    On behalf of my colleague, Mike, you are most welcome!

    Please feel free to get back to us anytime should you encounter any issues.

    Thank you.