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 - Change Height

    Asked by WorkerBeeSupply 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

    Page URL:
    https://form.jotform.com/60335537537256

    height inventory widget change height size image size
  • Profile Image
    JotForm Support

    Answered by Boris 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

    Answered by WorkerBeeSupply on February 09, 2016 at 12:04 PM

    Worked perfectly, thank you!