- ekkgearAsked on May 31, 2012 at 12:49 PM
I have been having issues with the display of my ecommerce ordering form. The pictures and option boxes were covering each other up. Everything looked jumbled together. I noticed that the very first item in my form was setup right, but each item following was not laying out correctly. So I compared the first item's code to the other items' code and found some inconsistencies. Once I made all the code consistent across all item, the layout was correct. Here are the two inconsistencies I found:
- you'll notice that the first piece of code in red doesn't appear in the second item below.
- the class of the first item is set as "form-product-image", but all following items are set as "form-product-image-with-options"
Once I fixed these two things, everything worked.
<div id="cid_13" class="form-input-wide"><span class="form-product-item"><img src="//farm8.staticflickr.com/7024/6571523867_8ee0ef65c7_s.jpg" class="form-product-image" height="50" width="50" align="absmiddle" />
<input class="form-checkbox" type="checkbox" id="input_13_1059" name="q13_products[id]" value="1059" />
15" EKK Pattern Laptop/Gun Case<span class="form-product-details"><b>
<span class="form-sub-label-container"><select class="form-dropdown" name="q13_products[special_1059][item_0]" id="input_13_quantity_1059_0">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<label class="form-sub-label" for="input_13_quantity_1059_0"> Quantity </label></span></span>
<span class="form-product-item"><img src="//farm8.staticflickr.com/7030/6571523875_614d397885_s.jpg" class="form-product-image-with-options" height="50" width="50" align="absmiddle" />
<input class="form-checkbox" type="checkbox" id="input_13_1060" name="q13_products[id]" value="1060" />
15" Stencil Laptop/Gun Case<span class="form-product-details"><b>
You can see your code here: http://form.jotform.com/form/10290620501
And the revised code here: www.ekkgear.com/pages/elites
- JotForm SupportabajanAnswered on May 31, 2012 at 01:49 PM
Thanks but our developers were notified of this error a few days ago and are working to correct it. However, I think the images in your form should all be classed as .form-product-image-with-options instead of .form-product-image. My colleague Jonathan illustrated a quick and effective fix for the class name discrepency in this thread. If you would like help with getting the images and their accompanying pull down selectors better aligned, we'll be glad to help.
- JotForm SupportabajanAnswered on May 31, 2012 at 02:02 PM
Oops! Sorry, that's a private thread and as such, you won't be able to view it. Anyway, here's Jonathan's fix in his own words (well, almost in his own words because I had to make an adjustment to the ID for it to work in your form)
1. In the the payment field, first add a free item/product (as your 1st product). Then add all succeeding products as normal
2. Since the default behaviour of the 1st item/product is not to aligned similar to 2nd and onward products -- inject a css code to hide the 1st item/product. Inject this code
*** Please note, input_13_1059 is the #ID of the 1st item.
3. The dummy 1st item/product should not affect the sum/total of the payments.