-
ericablairAsked on January 23, 2015 at 5:53 PM
Hi there,
I am making a product order form through the Payment Wizard. Some of my products have no variation, some have 2-3.
When the only variable is Quantity, the Quantity box automatically displays under the product name.
When there is an additional variable, both the Quantity box and the Variable box are automatically collapsed until you click the checkbox next to the product name.
How can I force the Quantity and Variable boxes to show even when someone has not yet selected the product? I would like all options to show when first viewing the form. Currently when they are collapsed, they cut off the photos that accompany the products.
Screenshot attached with explanation.
-
Elton Support Team LeadReplied on January 23, 2015 at 8:47 PM
Hi,
Append this CSS codes to your form, this should permanently display the sub-product options on that form.
#cid_38 > span.form-product-item:nth-child(8),
#cid_38 > span.form-product-item:nth-child(14) {
height: 120px !important;
}
#cid_38 > span.form-product-item:nth-child(16){
height: 100px !important;
}
Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form
Let us know if you have further questions. Thank you!
-
ericablairReplied on January 23, 2015 at 9:14 PM
That worked! However, now there is an uneven gap between products with 1 variant and products with multiple variants. What can I do to fix this? Here's a screenshot. Thanks!
-
SeanReplied on January 24, 2015 at 9:43 AM
Hello ericablair,
I checked your form and I realize that there is a slight inequality with the spacing between each item now compared to the screenshot you took in the above thread. I have also realized that it appears that the space allotted for each items is not sufficient for all the products listed on your order form.
I adjusted the height in the code provided by my colleague and this was the end result. You can update the code in the Custom Injected CSS option in the settings.#cid_38 > span.form-product-item:nth-child(8),
#cid_38 > span.form-product-item:nth-child(14) {
height: 140px !important;
}
You can view my cloned version of your form here:
http://form.jotformpro.com/form/50234284809961
I hope that this is of some assistance to you. Feel free to contact us if further support is needed.
Cheers!
Sean -
ericablairReplied on January 25, 2015 at 11:32 PM
Thanks so much, that worked too. However for some reason one item on my product list is still appearing truncated. I have tried deleting this product and reentering it, but it is still having the same issue. Any ideas?
Screenshot:
-
CharlieReplied on January 26, 2015 at 9:24 AM
Hi,
You could try using this code.
#cid_38 > span.form-product-item:nth-child(8),
#cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {
height : 210px !important;
}
Make sure to remove all CSS codes the may be of a conflict, I cloned your form and I see excess codes on it. Here's the cloned form that I have: http://form.jotformpro.com/form/50253508365958. To clone it, use this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.
Here's a screenshot of my CSS codes, there shouldn't be any similar codes that conflicts the design of the other.
Let us know if you need more help.
Thank you.
-
ericablairReplied on January 26, 2015 at 7:47 PM
Thanks so much. That improved things, but for some reason one of the items on my list is still appearing truncated ("Mary's Way Salve") until you click on it. Any ideas?
-
CharlieReplied on January 26, 2015 at 8:53 PM
Hi,
I see that your products have sub-category on them, and they are being hidden when the height does not match the minimum height of the product element.
Would you like to just even out the spaces and let the sub-category to show? If that is the case, you can remove the code I shared above and use this instead:
.form-product-item {
min-height: 250px !important;
}
You can try checking the change I made here in my cloned form: http://form.jotformpro.com/form/50253508365958
But if you prefer giving them each product specific heights so that they won't be cut off, just let us know which ones you want to adjust. Or you can just separate them,
Previous code:
#cid_38 > span.form-product-item:nth-child(8),
#cid_38 > span.form-product-item:nth-child(14), #cid_38 > span:form-product-item:nth-child(16) {
height : 210px !important;
}
New Code. Just separate the element pointing the "Mary's Way Salve".
#cid_38 > span.form-product-item:nth-child(8),
#cid_38 > span.form-product-item:nth-child(14) {
height : 210px !important;
}
#cid_38 > span:form-product-item:nth-child(16) {
height : 240px !important;
}
The pink highlight is the one pointing to "Mary's Way Salve", so you just need to separate it and give it it's own height value.
I hope this helps.
Thank you.
-
ericablairReplied on February 2, 2015 at 6:47 PM
Hi there,
This worked, but I felt that the form itself was too narrow, so I tried to make the form wider. Now I am experiencing more problems than before. Both "Mary's Way Salve" and "Infused Flower" are truncated, and some (not all) of the product descriptions are appearing very narrow, rather than stretching to the edge of the parameters.
I have adjusted the code above to display up til 350px, but still showing truncation.
Screenshots of the truncated options:
Screenshot of the overly narrow description text:
Thanks so much, you guys are so very helpful.
-
CharlieReplied on February 2, 2015 at 8:50 PM
Hi,
You're welcome. I've cloned your form and made edits on it. Could you check if this styling works for you: http://form.jotformpro.com/form/50327796198973. If it works for you, you can clone it.
Here's the styling I added.
.form-product-item img {
height : 250px;
width : 250px;
}
.form-product-item br + br {
display : block;
}
.form-product-item {
min-height: 250px !important;
width: 100% !important;
}
This should automatically adjust the width of each product item to full.
Do let us know if this works.
Thank you.
-
ericablairReplied on February 2, 2015 at 8:54 PM
That worked! Awesome. You guys have the BEST customer service--especially for people like me who don't really understand CSS, it's a godsend! Thank you thank you!
-
CharlieReplied on February 2, 2015 at 10:05 PM
Thank you for your kind words and you're very much welcome. I'm glad that everything is working in your end as expected. I do agree that not everyone are familiar with CSS, and our developers and management are trying their best to innovate our form builder, that includes the Form Designer, which lets users design more the form using tools, although it still needs quite a time to learn and there are things where we really need to use CSS. But, we're always here to help you as much as possible, so please do feel free to contact us anytime.
Thank you for your continued support in JotForm. :)