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

    Two payment elements are being cut off

    Asked by biancamartignone1 on November 08, 2016 at 06: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?
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 08, 2016 at 09: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:

    Hope this helps!

  • Profile Image

    Answered by biancamartignone1 on November 08, 2016 at 10:44 AM
    I tried this however it still doesn't seem to work?
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on November 08, 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.

  • Profile Image

    Answered by biancamartignone1 on November 09, 2016 at 02:44 PM
    Okay great thank you so much!
    ...
  • Profile Image
    JotForm Support

    Answered by Nik_C on November 09, 2016 at 05:17 PM

    You're welcome.

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

    Regards!

  • Profile Image
    JotForm Support

    Answered by Nik_C on November 09, 2016 at 05: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!

  • Profile Image

    Answered by biancamartignone1 on November 10, 2016 at 01: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?
    ...
  • Profile Image
    JotForm Support

    Answered by candy on November 10, 2016 at 02:35 AM

    Hello,

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

    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.

  • Profile Image

    Answered by biancamartignone1 on November 10, 2016 at 09:44 AM
    This helped however the image is still being cut off?
    ...
  • Profile Image

    Answered by biancamartignone1 on November 10, 2016 at 09: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?
    ...
  • Profile Image
    JotForm Support

    Answered by candy 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:

    Thanks. 

     

  • Profile Image

    Answered by biancamartignone1 on November 14, 2016 at 02:44 AM
    Okay thank you I will replace the images and see if it works. I have seen
    ...
  • Profile Image
    JotForm Support

    Answered by Helen on November 14, 2016 at 03:21 AM

    That's amazing!

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

  • Profile Image

    Answered by biancamartignone1 on November 14, 2016 at 05:44 AM
    That doesn't help?
    ...
  • Profile Image
    JotForm Support

    Answered by seth on November 14, 2016 at 06: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;

    }

     

    to:

    .form-product-child-table {

        margin-top : 40px;

    }

    to be able to have a cleaner product display.

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

    Regards.

  • Profile Image

    Answered by biancamartignone1 on November 14, 2016 at 09: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.
    ...
  • Profile Image
    JotForm Support

    Answered by Kiran 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. 

  • Profile Image

    Answered by biancamartignone1 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?
    ...
  • Profile Image
    JotForm Support

    Answered by Welvin on November 15, 2016 at 02: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. 

  • Profile Image

    Answered by biancamartignone1 on November 15, 2016 at 02:44 PM
    It worked! Thank you so much!
    ...