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

    Creating sub products changes item's thumbnail size

    Asked by mgtoronto on December 13, 2014 at 10:38 PM

    My form will be used for an event registration and has a number of items available for the user to purchase via PayPal integration. I have added sub products to some of these items and this has changed the way the product is displayed. The thumbnail image is cut-off and only the product name & check box are shown. I would like them to appear the same as the products that don't have sub products. Can you help with this?

    Thanks in advance.

    Jim

    Page URL:
    http://www.mg2015.com/registration-x.html

    Screenshot
    sub products event registration name purchase product show entire images show whole images images cut off cropped images product images
  • Profile Image

    Answered by Ben on December 14, 2014 at 04:11 AM

    Hi Jim,

    Can you help with this?

    Whenever you have any issues with a setup, feel free to let us know and we would be happy to help you to achieve what you are after. :)

    Please inject this CSS code into your jotform and it should fix the issue that you have:

    .form-product-item.hover-product-item[style="height: 14px;"] {
        min-height: 101px;
    }
    .form-product-item.hover-product-item:nth-of-type(18), .form-product-item.hover-product-item:nth-of-type(20) {
        min-height: 120px;
    }

    The first rule above will make them all have the proper height if they only have 2 sub product dropdowns in them.

    The second one (with numbers 18 and 20 in them) makes those with 3 dropdowns work as well.

    The way you come with the required number is by counting the options from top to the current position, but also counting the labels such as "OR" and "PLEASE SELECT YOUR REGALIA CHOICES FROM THE FOLLOWING ITEMS:" with the last one being number 15 from the top.

    So if you add another set of options or sub products, and need to increase its height, just count it's position from the top and add it to the rule:

    for example: .form-product-item.hover-product-item:nth-of-type(x)

    which would then make the rule look like this (please make sure that comma is added right before the next rule, but non after the last one.

    .form-product-item.hover-product-item:nth-of-type(18), .form-product-item.hover-product-item:nth-of-type(20), .form-product-item.hover-product-item:nth-of-type(x)

    Do let us know how it goes for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by mgtoronto on December 14, 2014 at 11:19 AM

    Thank you very much for the extremely fast response. Your suggestion did lead to the fix I was looking for.

    In the same vein, can you suggest a custom css to change the size of only some of the product thumbnails. As there are some items with colour choices, I would like to have wider thumbnail pics to display the different colour options.

    Thanks,

    Jim

  • Profile Image
    JotForm Support

    Answered by Welvin on December 14, 2014 at 02:38 PM

    Hi Jim,

    You are very much welcome and it's our pleasure to help you!

    Your question related to changing the size of the product image has been moved here: http://www.jotform.com/answers/475322. You should receive our reply there later.

    Thank you!