-
biancamartignone1Asked on November 8, 2016 at 6:08 AM
-
Elton Support Team LeadReplied 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:
Hope this helps!
-
biancamartignone1Replied on November 8, 2016 at 10:44 AMI tried this however it still doesn't seem to work?
... -
Nik_CReplied 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.
-
biancamartignone1Replied on November 9, 2016 at 2:44 PMOkay great thank you so much!
... -
Nik_CReplied 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_CReplied 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!
-
biancamartignone1Replied on November 10, 2016 at 1:44 AMYou 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?
... -
candyReplied 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:
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.
-
biancamartignone1Replied on November 10, 2016 at 9:44 AMThis helped however the image is still being cut off?
... -
biancamartignone1Replied on November 10, 2016 at 9:44 AMAnd 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?
... -
candyReplied 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.
-
biancamartignone1Replied on November 14, 2016 at 2:44 AMOkay thank you I will replace the images and see if it works. I have seen
... -
HelenReplied on November 14, 2016 at 3:21 AM
That's amazing!
If you have any questions or issue, feel free contact us.
-
biancamartignone1Replied on November 14, 2016 at 5:44 AMThat doesn't help?
... -
sethReplied 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;
}
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.
-
biancamartignone1Replied on November 14, 2016 at 9:44 AMThank 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 LeadReplied 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.
-
biancamartignone1Replied on November 15, 2016 at 12:44 PMThis 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 LeadReplied 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.
-
biancamartignone1Replied on November 15, 2016 at 2:44 PMIt worked! Thank you so much!
...