Inventory Widget - Change Height

  • Profile Image
    WorkerBeeSupply
    Asked on February 04, 2016 at 01: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

  • Profile Image
    Boris
    Answered on February 04, 2016 at 04: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:

    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.

  • Profile Image
    WorkerBeeSupply
    Answered on February 09, 2016 at 12:04 PM

    Worked perfectly, thank you!