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

    Why are my product items overlapping?

    Asked by jonathan397 on May 01, 2017 at 11:05 AM

    I'm having a problem with the product images overlapping on my form and I can't figure out why. I've already spent a decent amount of time searching this question and none of the answers I found have fixed the problem so I'm hoping someone here can help.

     

    Here is the form https://form.jotform.com/71204662024142

     

    And here are a few of the things I've tried.

     

    .form-product-item.hover-product-item {

        height: auto !important;

    }

     

    .form-product-item {

        height: auto !important;

    }

     

    .form-product-item.hover-product-item {

        border : 10px solid #fff;

    }

     

    .form-product-item img {

        border : 1px solid #fff;

    }

     

    .form-product-item.hover-product-item {

        padding-bottom : 20px;

     

    }

     

    What's strange to me is that every time I inject a snippet of code, the form reflects that change in the editor, so I think "Ok great, that fixed the problem!" but when I view the live preview of the form everything goes back to overlapping. The only thing that has even remotely worked was increasing the product item height to like 150px, and it looked terrible. 

     

    Please help. 

     

    Thanks, 

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

  • Profile Image
    JotForm Support

    Answered by BJoanna on May 01, 2017 at 12:43 PM

    I have tested your form and I was not able to replicate mentioned issue. Product images and items are not overlapping. I have also cloned your form and I am not able to replicate it on my cloned form as well. 

    This CSS code that you have added to your form should resolve mentioned issue. 

    .form-product-item img {

        border : 1px solid #fff;

    }

    If the issue still persist on your and add  !important rule to mentioned CSS code:

    .form-product-item img {

        border : 1px solid #fff!important ;

    }

    If your form is embedded and if this this issue can only be replicated there, please provide us URL of your webpage. 

    Let us know if you need further assistance.

  • Profile Image

    Answered by jonathan397 on May 01, 2017 at 03:07 PM

    Hey Joanna, 

    The problem isn't exclusive to when it's embedded. My products overlap in the preview mode through jotform as well. I already tried the first snippet of code you mentioned, but I just added the !important rule and nothing changed. I've mentioned some of what I've tried injecting in my original post if you want to take a look. 

    Here are screenshots of what I'm seeing on my end. I've tried using another browser and another computer and got the same results on both. As you can see, the sub products are overlapping. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on May 01, 2017 at 04:12 PM

    It seems that I did not understood your issue correctly when I replied to you previously.

    If I understood you correctly you would like that all sub products are shown on your live form. 

    Currently some of them are shown like this.

    And you would like that they are shown like when product option is checked. 

    Please note that this is default behavior. When product is not selected, height of product will depend of height of product image. 

    You increase the height of products, like you already tried. However you should increase height only of specific products, not of all products. You can use :nth-child() rule to target only specific product. 

    Add this CSS code to your form:

    #cid_30 span.form-product-item:nth-child(2) {

        height : 160px!important;

    }

    #cid_30 span.form-product-item:nth-child(4) {

        height : 130px!important;

    }

    #cid_30 span.form-product-item:nth-child(6) {

        height : 130px!important;

     

    }

    #cid_30 span.form-product-item:nth-child(22), #cid_30 span.form-product-item:nth-child(24),#cid_30 span.form-product-item:nth-child(26),#cid_30 span.form-product-item:nth-child(28){

    height: 70px!important

    }

    You can add custom height of each of your products. 

    Product 1 is :nth-child(2), product two is :nth-child(4), product 3 is :nth-child(6) ...

    Here is my demo form: https://form.jotformpro.com/71205571526957 

    Feel free to test it and clone it

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by jonathan397 on May 01, 2017 at 05:04 PM

    Thank you so much! I was trying to use the nth-child rule yesterday, but I couldn't figure out which product was which child from looking at the page source. 

    Much appreciated.