Two payment elements are being cut off

  • biancamartignone1
    Asked on November 8, 2016 at 6:08 AM
    My second problem (screenshot attached) is that the 2 products which I have 2 options for (colour and quantity) are being cut off? It seems like the elements have a height of 17px causing them to be cut off but I cannot seem to fix them?
  • Elton Support Team Lead
    Replied on November 8, 2016 at 9:48 AM

    Hi,

    Inject this CSS codes to your form to correct it.

    span.form-product-item.hover-product-item[style="height: 19px;"]{

        height:40px !important;

        padding:12px 6px;

    }

    span.form-product-item.hover-product-item[style="height: 172px;"]{

        height:190px !important;

    }

    .form-product-child-table {

        margin-top: 10px;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it into the bottom section if you have existing CSS codes in your form)

    Expected result:

    Two payment elements are being cut off Image 1 Screenshot 30

    Two payment elements are being cut off Image 2 Screenshot 41

    Hope this helps!

  • biancamartignone1
    Replied on November 8, 2016 at 10:44 AM
    I tried this however it still doesn't seem to work?
    ...
  • Nik_C
    Replied on November 8, 2016 at 12:56 PM

    The problem is they are all under the same div class, so CSS will apply to all. For example, if you paste this CSS:

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

    height:200px!important;

    }

    That will work, but it will increase the space between the products.

    I'll try some other solutions and get back to you shortly.

    Thank you for your patience.

  • biancamartignone1
    Replied on November 9, 2016 at 2:44 PM
    Okay great thank you so much!
    ...
  • Nik_C
    Replied on November 9, 2016 at 5:17 PM

    You're welcome.

    If we can be of any additional assistance please let us know.

    Regards!

  • Nik_C
    Replied on November 9, 2016 at 5:20 PM

    My apologies, probably I misunderstood, let us know if this solution doesn't work for you, so we can see other possibilities.

    Thank you!

  • biancamartignone1
    Replied on November 10, 2016 at 1:44 AM
    You mentioned that you would try find an alternative solution? That would
    be great if you could. The thing is that it shouldn't be doing this in the
    first place. Is there not something that can be fixed? Because there seems
    to only be a height set on those two eleements which I did not set so
    somewhere something is breaking it?
    ...
  • candy
    Replied on November 10, 2016 at 2:35 AM

    Hello,

    As an alternative solution, you can use smaller font size of the form to avoid cutting off as the following screenshot:

    Two payment elements are being cut off Image 1 Screenshot 20

    I have set the font size 14px as the following:

    .form-all{

    font-size: 14px;

    }

    Even if, you can set the font size 16px instead of 17px you will avoid the cutting of that two fields.

    I hope this helps.

    Thank you.

  • biancamartignone1
    Replied on November 10, 2016 at 9:44 AM
    This helped however the image is still being cut off?
    ...
  • biancamartignone1
    Replied on November 10, 2016 at 9:44 AM
    And if a user selects one of these options it drops down the options and
    then the bottom of the form is cut off? I tried to make the input area on
    wix longer but it doesn't help? It just adds length after the cut off point?
    ...
  • candy
    Replied on November 10, 2016 at 10:22 AM

    Hello,

    I have checked again and I have realized that the picture you had uploaded to those areas is very wide. This is the reason it seems like cut off as it is automatically adjusted. Actually, the picture did not cut off. The picture size does not belong to that area.Please try to upload the same picture with different sizes such as the pictures above. Please find the screen below to see the difference:

    Two payment elements are being cut off Image 1 Screenshot 20

    Thanks. 

     

  • biancamartignone1
    Replied on November 14, 2016 at 2:44 AM
    Okay thank you I will replace the images and see if it works. I have seen
    ...
  • Helen
    Replied on November 14, 2016 at 3:21 AM

    That's amazing!

    If you have any questions or issue, feel free contact us.

  • biancamartignone1
    Replied on November 14, 2016 at 5:44 AM
    That doesn't help?
    ...
  • seth
    Replied on November 14, 2016 at 6:19 AM

    Hello,

    Could you please add this code to your form:

    .form-product-item {

        min-height: 45px;

    }

     

    Also you can update this code on your form:

    .form-product-child-table {

        margin-top : 10px;

    }

    Two payment elements are being cut off Image 1 Screenshot 30

     

    to:

    .form-product-child-table {

        margin-top : 40px;

    }

    Two payment elements are being cut off Image 2 Screenshot 41

    to be able to have a cleaner product display.

    I hope this answer helps. If you have further queries please contact us again,

    Regards.

  • biancamartignone1
    Replied on November 14, 2016 at 9:44 AM
    Thank you this has solved my issue with regards to the text getting cut
    off. however I am still having a problem that if a user selects a product
    that drops down further options, the "Submit" button gets pushed down and
    cannot be seen on the form.
    ...
  • Kiran Support Team Lead
    Replied on November 14, 2016 at 10:26 AM

    I notice that you are using Wix for your web site.  It looks like that the height of the form is not adjusted automatically. Could you try increasing the height of the frame where the form is embedded so that it should be displaying the form normally? 

    Let us know if the issue still persists. We will be happy to assist you further. 

  • biancamartignone1
    Replied on November 15, 2016 at 12:44 PM
    This does not fix the problem. You can see how much space is below the form
    - this is how far the code box stretches. Please could you assist further?
    ...
  • Welvin Support Team Lead
    Replied on November 15, 2016 at 2:30 PM

    Instead of using the embed codes, try using embedding the form as a webpage. You have to use this form URL:

    https://form.myjotform.com/53285998433571

    Follow the steps here to embed as webpage: https://www.wix.com/support/html5/article/embedding-an-external-site-3240166

    This method will create a scrollbar in the page allowing you to navigate to the bottom of the form as soon as the product items expand. 

  • biancamartignone1
    Replied on November 15, 2016 at 2:44 PM
    It worked! Thank you so much!
    ...