How can I add space between unordered list items?

  • Profile Image
    odnd
    Asked 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.

  • Profile Image
    BDAVID
    Answered 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
    odnd
    Answered on September 10, 2016 at 10:04 AM

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

  • Profile Image
    Jim_R
    Answered 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
    odnd
    Answered 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
    BDAVID
    Answered 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.