How to reduce the space between the last inventory row and the start of new section?

  • Keithy
    Asked on March 30, 2016 at 9:35 PM

    Did I mention how awesome your help has been? Thank you for writing the custom code because I would have never been able to figure that out.Truly impressed with how quick and thorough your responses are. 

    With that being said, just one more question...lol. The space between the inventory rows is perfect, but now there is a big space after the last inventory row and start of new section...is there a way to fix that? If not, no worries as I don't want to break the code, but thought I would ask...

    Thank you again!!

     

     How to reduce the space between the last inventory row and the start of new section? Image 1 Screenshot 20

  • Charlie
    Replied on March 31, 2016 at 2:42 AM

    I'm glad my colleagues were able to help you on your form :)

    Please allow me some time to review your CSS code and your form, I'll get back to you with a slightly modified one. 

  • Charlie
    Replied on March 31, 2016 at 3:24 AM

    Here are my suggestions. They are quite a lot and it might take you a couple of minutes to do, but I believe this will make your form more organize and will allow us to easily modify it in the future if you need more help.

    1. First, make sure that you have deleted the CSS code under the CSS tab in your Inventory widget settings. I noticed that some of your widgets have the same CSS code in their settings.

    Here's what I am referring to:

    How to reduce the space between the last inventory row and the start of new section? Image 1 Screenshot 40

     

    2. After that, make sure that each widget has its "Label" option to "Disabled", some of your widgets have it disabled or enabled, which is causing some alignment issues because they don't have the same settings:

    How to reduce the space between the last inventory row and the start of new section? Image 2 Screenshot 51

     

    3. The last thing you need to do is replace the existing CSS code you have with this one:

    li[data-type="control_widget"] {

        margin-top : 0px !important;

        margin-bottom : -1px !important;

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        max-height : 50px !important;

    }

     

    Assuming that you do not have any other widgets, this would be a simpler code to use with the same effect. Here's a screenshot to where you need to paste it. Make sure to remove all the other existing code that refers to the widget.

    How to reduce the space between the last inventory row and the start of new section? Image 3 Screenshot 62

     

    Here's my cloned form with those changes: https://form.jotform.com/60901296234958 

    Let us know if that works for you.

  • Keithy
    Replied on March 31, 2016 at 11:49 PM

    Holy smokes, you rewrote the code and it's a lot more condensed. Thank you for fixing the form it looks fantastic. I love it and appreciate that you did all of the heavy lifting so that I can just clone the form! 

    Thank you!!

  • Charlie
    Replied on April 1, 2016 at 1:29 AM

    No worries, I'm glad it helped. If you are just cloning my form, I strongly advise that you open each widget and click the "Update Widget" button. This is because the widget in my form is using my own API, if you clone it you'll need to apply your account's own API, however, that doesn't seem to happen automatically after you clone the form, you need to open the widgets and just click the "Update Widget" button, that will automatically re-apply your own API key to the widget.

    Here's a screenshot, noticed that your form is showing errors regarding the API:

    How to reduce the space between the last inventory row and the start of new section? Image 1 Screenshot 20

     

    Let us know if that helps.