Inventory Widget - decreasing space between widgets

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

  • Profile Image
    BDAVID
    Answered 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
    sloughbottom
    Answered 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
    sloughbottom
    Answered 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
    ashwin_d
    Answered 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
    sloughbottom
    Answered on July 27, 2016 at 11:18 PM

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