Inventory Widget - Change Height

  • WorkerBeeSupply
    Asked on February 4, 2016 at 1:59 PM

    I've made the image within the inventory widget larger but the iframe cuts it off, and I can't seem to make it larger / adjust to the image size. Any suggestions? The default image size in the iframe widget is way too small.

    Thanks,

    Eugen

  • Boris
    Replied on February 4, 2016 at 4:37 PM

    I see that you have increased the size of the image by adding the following custom CSS directly to the widget:

    img {
        width: 100px !important;
        height: 100px !important;
    }

    The problem now comes from the fact that the iFrame which is holding this widget, is set to have height of only 80px when there is only one product inside of the Inventory Widget. In order to overcome this, we need to add some custom CSS to the form itself as well:

    #customFieldFrame_12 { min-height: 130px; }

    You can add the CSS code to your form by following this guide: How to Inject Custom CSS Codes.

    By adding the above code to the bottom of your form's existing custom CSS, the Inventory widget will appear as in the following image:

    Inventory Widget   Change Height Image 1 Screenshot 20

    Now the above code is made specific for that one Inventory widget in which you've already changed the size of the image. If you want to apply the same CSS code to all the inventory widgets on your form, you can try injecting this CSS instead:

    iframe[src*="jotform.io/inventory/"] { min-height: 130px; }

    Let us know if you need further assistance, and we will be happy to help.

  • WorkerBeeSupply
    Replied on February 9, 2016 at 12:04 PM

    Worked perfectly, thank you!