Customize Inventory Widget

  • Profile Image
    nerdyformynails
    Asked on June 17, 2020 at 12:49 AM

    I would like to customize the inventory widget by having the thumbnail at the top and then the quantity to input below and the inventory remaining below that, all in a vertical format. Then I would like to be able to have multiple of these on a row, so it looks more like a shopping page. Is this possible?

  • Profile Image
    Vick_W
    Answered on June 17, 2020 at 03:48 AM

    Hey there,


    I'm looking into this for you and will get back to you shortly.

    Thanks

  • Profile Image
    Vick_W
    Answered on June 17, 2020 at 05:12 AM

    Hey there,

    Thanks for the wait.

    Please follow the instructions as shown in the screenshots below to achieve the desired results.

    Select the inventory widget and click on settings. Then change its width to 250 and click on the Advanced tab.

    1592384396screenshot.jpg.png

    On the advanced tab turn on the shrink button.

    1592384539screenshot.jpg.png

    Now you'll be able to see that the inventory widget is half the size. As soon as you apply same changes on the next inventory widget it will move up in the same row as the first widget.

    But before you do that you'll also have to add the following CSS code in each widget's CSS section to align the image, dropdown menu, and title vertically.

    1592384918screenshot.jpg.png

    Please copy the following CSS code in the widget CSS section as shown above.

    .checklist input[type=number], .checklist select.item {

        margin-right: 58vw;   

    }


    .checklist img {

        width: 40px;

        height: 40px;

    }


    .checklist label {

        padding-right: 4em;

    }

    Hope this helps. Let us know if you need further assistance.

    Thanks.

  • Profile Image
    Vick_W
    Answered on June 17, 2020 at 05:15 AM

    Missed one thing. Here is your cloned form link in which I've made changes. In case if you need to check it you can clone it:

    https://form.jotform.com/201681524243954

    Please use the following link to see how you can clone a form using a URL.

    https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Thanks