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

    Inventory Widget - decreasing space between widgets

    Asked by sloughbottom on July 25, 2016 at 03:09 PM

    Hello again - another inventory question.

    I searched this question before I asked it and there was a lovely answer directing the user to add a specific CSS code to decrease the space between each inventory widget. However this CSS code won't work for mine since it's on different lines etc - but I don't know how to create my own code.

    If I could have some assistance on how to add a CSS code to decrease the space between all of my inventory boxes, I would be ever so obliged.

    I know the customer support is amazing on this site and I am looking forward to knowing the response.

    Justine

    Page URL:
    https://www.jotform.com/?type=widgets&amp;name=inventory&amp;id=53bbb6<br/>f656bbf16119000011#

  • Profile Image
    JotForm Support

    Answered by BDAVID on July 25, 2016 at 06:03 PM

    In order to target specific fields to apply CSS code, you need to get their ids by doing a right click>>Inspect Element in your browser:

    Please inject the following CSS code in your form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_12{

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    #id_13{

        padding-top: 0px !important;

        margin-top: -10px !important;

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    #id_14,#id_15{

        padding-top: 0px !important;

        margin-top: -22px !important;

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    #id_16,#id_17,#id_18,#id_19,#id_20{

        padding-top: 0px !important;

        margin-top: 0px !important;

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    #id_21{

        margin-top: -23px !important;

    }

    Here is my cloned version: https://form.jotform.com/62066871951967 

    Let us know if you need more help.

  • Profile Image

    Answered by sloughbottom on July 25, 2016 at 06:23 PM

    *happy sigh* It is BEAUTIFUL. Thank you. I did exactly as you said and it worked perfectly. I am eternally grateful.

     

    Also I imagine your job is quite interesting as you get to see all the different forms that people are struggling with - and you make their day by fixing it so easily!!

    Thank you so much. Yipeeee!!!

  • Profile Image

    Answered by sloughbottom on July 25, 2016 at 09:42 PM

    Oops.

    I needed to add another item (Lard/Tallow) and now it messed everything up.

    I thought I would be all clever and just change the numbers so that it was #id_16 to #id_21 and then the last code would be for #id_22 but it didn't work and nothing is changing.

    Then I messed around with the pixel amounts but that didn't change either

    I need a code genius to help again! Please please thank you thank you!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 25, 2016 at 11:33 PM

    Hello,

    I have solved this issue in your form by changing the height of the #id_26 widget and then injecting the following custom css code:

    li#id_21 {

        margin-top: -10px !important;

    }

    #id_26 {

        margin-top: -10px !important;

    }

    Please check the screenshot below:

     

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by sloughbottom on July 27, 2016 at 11:18 PM

    Yes! thank you so much. That worked perfectly. I really appreciate it.