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

    White line Randomly Appearing in form

    Asked by tomorrownight on December 15, 2014 at 06:59 AM

    Hey, do you guys know what has gone wrong here?  i appear to have a white line in my form, between "Marriage Prep Centre" and "Which Date"...

    in the CSS designer, there is a similar white line between every field. 

    Thanks

    Page URL:
    http://www.marriageprep.co.uk/online-booking/book/

    white line designer
  • Profile Image
    JotForm Support

    Answered by Charlie on December 15, 2014 at 10:13 AM

    Hi,

    You can remove this by doing the following:

    1. Navigate to Form Styles->Form Designer

     

    2. Navigate to CSS tab at the right and add the custom code below.

    Add this code under the CSS tab

    #id_27 {

        height: 60px !important;

    }

    #id_24 {

        height: 60px !important;

    }

    .form-line {

        height: auto;

        margin:0;

    }

     

     

    You can check the edited cloned form here: http://jotform.com/form/43484417644965.

    Let us know if you need help on this.

    Thank you.

  • Profile Image

    Answered by tomorrownight on December 15, 2014 at 10:46 AM

    This is brilliant, thanks a lot, 

    if its not too much trouble (dont worry if it is) but could you explain to me what the CSS actually did when i included your text?

  • Profile Image
    JotForm Support

    Answered by Charlie on December 15, 2014 at 12:03 PM

    You're most welcome. I'm glad that it worked for you. Below is how I understand my code. 

    #id_27 is the element holding the field "Which Marriage Prep Centre". Because the label of the name is quite long, it makes another line, but the height of the actual element doesn't adjust, that is why you have a white line below it. What we did is just increase the height to cover the white line.

    #id_27 {

        height: 60px !important;

    }

     

    #id_24 is the ID name of the field "How did you hear about us?". Same goes with the #id_27 above why we added height on this.

    #id_24 {

        height: 60px !important;

    }

     

    The element .form-line covers all the fields you have, we added a value of "auto" in height so that they will adjust themselves automatically while the margin is set to 0 so that we can avoid white lines in between the .form-line element. 

    .form-line {

        height: auto;

        margin:0;

    }

    When we don't add the above code of .form-line this shows up:

     

     

    If you need an assistance again or have any other concerns, please feel free to open up a new thread here in the forum, we'll be more than happy to help you.

    Thank you.