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

    Preview mode does not line up with edit mode

    Asked by je862 on December 12, 2016 at 09:08 PM

    I'm trying to insert a line above "Ears" in the form so that the "Abdomen" selections do not overlap "Neck".  In the edit mode the "Ears" selection is on the same line as "Eyes" so there is no way to insert a  line above "Ears".  The form lines up okay in the "Preview" mode.

     

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

    Screenshot
  • Profile Image
    JotForm Support

    Answered by emily on December 13, 2016 at 02:43 AM

    Hi,

     

    Thank you for contacting us.

     

    I inspected your form with ID:60137688531156. It seems like you have shrinked the Matrix fields of your form. This is why the fields are overlapping.

     

    To fix this issue, you need to put space before each matrix field. You can adjust the space according to your requirements. 

     

    Kindly inject the custom CSS codes to your form.

     

     li#id_111 {

        margin-top: 20px;

    }

    li#id_112 {

        margin-top: 20px;

    }

    li#id_113 {

        margin-top: 20px;

    }

    li#id_118 {

        margin-top: 20px;

    }

    li#id_119 {

        margin-top: 20px;

    }

    li#id_120 {

        margin-top: 20px;

    }

    li#id_121 {

        margin-top: 20px;

    }

    li#id_122 {

        margin-top: 20px;

    }

    li#id_123 {

        margin-top: 20px;

    }

    li#id_124 {

        margin-top: 20px;

    }

    li#id_125 {

        margin-top: 20px;

    }

    li#id_126 {

        margin-top: 20px;}

     

     

    Please have a look at the user guide below.

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

    If need further guidance, please let us know.

     

    Thank you.

  • Profile Image

    Answered by je862 on December 13, 2016 at 05:53 PM

    that worked. Thanks.

    Jim Erickson