-
swillliams284Asked on February 19, 2018 at 5:15 PM
Good Afternoon,
I hope that you can help me with a question on creating a form with 2 "product" columns. I have created a form that is single column that works fine for a listing of items that can be ordered. However, it involves a fair amount of scrolling to be able to submit the order. So what I would like to have is two columns of productrs, cutting the scrolling in half.
So I copied the original form and increased the width of the form (https://form.jotform.com/80457260853156) to have room for the two columns. I shrank the field (Inappropriate Grandpa Products) and enabled the Move to new line option. The item now takes less than half the width of the form. However, If I create a new item/product, I can not get it to be on the same line as the first item, even if all items are "Shrunk".
Any thoughts on what I'm missing here ? Any help appreciated
Page URL: https://form.jotform.com/80457260853156 -
John_BensonReplied on February 19, 2018 at 8:27 PM
Please check my cloned form: https://form.jotform.com/80498227824970
Is that what you're trying to achieve? If yes, you can clone the form by following the guide below to check the custom CSS code I have added.
https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL
You can also just copy the custom CSS code and add it to your form:
.form-product-item {
border: 1px solid #EFEFEF;
margin: 1px;
float: center;
width: 350px;
}
.form-product-item + br {
display:none;
}
br + b {
float: left;
padding-top: 20px;
}
.form-payment-total {
line-height: 50px;
margin: 1px;
border: 0px solid #EFEFEF;
border-radius: 4px;
padding: 15px;
padding-right: 193px;
padding-left: 6px;
}
Let us know if you need further assistance. Thank you.
-
swillliams284Replied on February 19, 2018 at 9:43 PMYou are brilliant !!!!!!!!
That is exactly what I was hoping for, clearly I wasn't searching for the correct terminology.
Thank you very much, that was beyond easy to implement
Scott Williams
...