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 can I add space between unordered list items?

    Asked by odnd on September 09, 2016 at 07:54 PM

    I tried going into the Design interface, selecting the CSS tab, and adding the following:

     

    li {

    margin-top: 20px;

    padding-top: 20px;

    }

     

    as well as...

     

    list-item {

    margin-top: 20px;

    padding-top: 20px;

    }

     

    But it didn't affect the presentation of my list.

    Page URL:
    http://olddogsnewdigs.com/form-foster.html

    Screenshot
    items unordered list add space how
  • Profile Image
    JotForm Support

    Answered by BDAVID on September 09, 2016 at 10:40 PM

    Inject the following CSS code as explained on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #text_77 li{

        padding-top: 10px !important;

    }

    Result:

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by odnd on September 10, 2016 at 10:04 AM

    Thank you! How might I have identified the ID as #text_77?

  • Profile Image
    JotForm Support

    Answered by Jim_R on September 10, 2016 at 02:29 PM

    I'm glad David's suggestion worked. There are 2 ways to get the ID of a field:

    1. The easy way - Use our FORM DESIGNER. Click DESIGN at the top > ADVANCED DESIGNER > CSS tab > then double click the field (note, you need to double click it to get the ID)

    2. The traditional way - Using the browser console and inspect the element

    There's also another way but this doesn't apply in your case since the field you're targeting is a TEXT (HTML) field. For other QUICK or BASIC fields, you can get the IDs by following this guide on How-to-find-field-IDs-and-names

    I would also recommend you avoid targeting default DOM elements (e.g. li, ul, p, etc.) It's better to adjust the CSS of classes and IDs to avoid conflicts with other elements on your form.

  • Profile Image

    Answered by odnd on September 11, 2016 at 01:55 PM

    Wow! Thank you for the video demonstrations! I've never seen anything like it in a forum like this! It's tremendously helpful!

    Okay, so your recommendation:

    • The wrong thing to do is what I tried originally: li { padding-top: 20px; }

    • The right thing to do is what you demonstrated: #text_77 li { padding-top: 10px !important; } even though it includes a reference to the "li" element?

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on September 11, 2016 at 02:10 PM

    Exactly, by adding the ID of the field, you are specifying the field where they style should be applied to, in order to avoid affecting other elements in your form.

    Open a new thread if you need anything else, we will be glad to assist you.