-
b.m.ezzatAsked on April 19, 2016 at 7:28 PM
Dears
For below menu i need to have the 4 fields (item, price, quantity and total price) all in one line and to be aligned together when adding more items
May be like adding a table here
Could you support me in this i would like to have it organizzed and looks easy for end user to use
-
b.m.ezzatReplied on April 19, 2016 at 7:34 PM
i managed to put the 4 fields in one line but still not aligned together
-
Chriistian Jotform SupportReplied on April 19, 2016 at 10:53 PM
Please inject the custom css below to fix the alignment of the items:
.form-line-column {
width: 130px!important;
padding-top: 0px;
padding-bottom: 0px;
}
.form-line-column p {
margin-bottom: 0px;
}
.form-line-column select {
width: 100px!important;
}
Once the CSS has been injected, the fields should look like the screenshot below:
Here's a cloned version of your form where I applied the css: www.jotform.com/61098354073962
If you need further assistance please let us know.
-
b.m.ezzatReplied on April 20, 2016 at 2:31 AM
Thanks Chriistian
It looks great but still needs some tuning, can i increase the size of first column (the item filed column) to be around 40% of the total width of the row, while the other 3 columns to be narrower so that each column would be around 20% of the total width
-
b.m.ezzatReplied on April 20, 2016 at 3:00 AM
May be i would need first column to be 40% width
Second column 30% width
Third and fourth each 15% width
-
Chriistian Jotform SupportReplied on April 20, 2016 at 4:19 AM
I have updated the css to fit your requirement. Please remove the previous css and inject the one below instead:
.form-line-column {
width: 130px!important;
padding-top: 0px;
padding-bottom: 0px;
}
.form-line-column p {
margin-bottom: 0px;
}
.form-col-1 {
width: 40%!important;
padding-left: 20px!important;
}
.form-col-2 {
width: 30%!important;
}
.form-col-2, .form-col-3 {
padding-left: 0px;
padding-right: 0px;
}
.form-col-3, .form-col-4 {
width: 15%!important;
}
.form-line-column select {
width: 80px!important;
}
.form-col-4 {
padding-left: 20px;
padding-right: 0px;
}
If you need further assistance, please let us know.
Regards.