Why product in products list is cut off?

  • calebtaulbee
    Asked on April 12, 2017 at 2:46 PM

    Please help, here is the link:  https://form.jotform.com/70717115135146

    Jotform Thread 1117825 Screenshot
  • Nik_C
    Replied on April 12, 2017 at 5:29 PM
    For some reason the height is messed up, it could be related to the theme used. I was able to make all the products show properly, but with a gap, for example:
     
    Why product in products list is cut off? Image 1 Screenshot 30
    And that you can achieve by adding the below CSS code to your Custom CSS Code:
     
    span.form-product-item.hover-product-item {
        height: 172px!important;
    }
     
    Another way would be to move the first block to the right and a bit up:
     
    Why product in products list is cut off? Image 2 Screenshot 41
    You can achieve that by adding the below CSS code:
     
    span.form-product-item.hover-product-item {
        height: 137px!important;
    }
    table#input_50_1010_subproducts {
        margin-left: 320px;
        margin-top: -31px;
    }
     
    Into the Custom CSS Code field.

    Here is my clone of your form as well, feel free to check it: https://form.jotformpro.com/71016528478965
    Let us know if you have any further questions.
     
    Thank you!
  • calebtaulbee
    Replied on April 12, 2017 at 5:47 PM

    thank you for the reply!  I applied the first CSS Code you gave me but when i apply it the top box top one is now cutting off the last item and when selected it doesn't open up any further.  Why product in products list is cut off? Image 1 Screenshot 20

  • calebtaulbee
    Replied on April 12, 2017 at 6:06 PM

    Update:  I add CSS for Line height and that helped. But this seems to be a design flaw in that payment object.  Can this be submitted to development?

  • Nik_C
    Replied on April 12, 2017 at 7:17 PM

    Thank you for getting back to us.

    Actually, the issue is with the theme used, if the theme is removed it is working fine:

    Why product in products list is cut off? Image 1 Screenshot 20

    So that's why it needs CSS adjustments. 

    You can check my clone of your form with default theme: https://form.jotformpro.com/71016528478965

    Thank you.