-
eurydice8Asked on June 16, 2016 at 9:25 AM
Hello!
I am creating a form and would love to remove all that space between the vertical fields. Is that possible to achieve please? -
David JotForm Support ManagerReplied on June 16, 2016 at 11:11 AM
Yes, you can reduce the vertical space with the Form Designer tool, example:
Click on Designer>>LineLayout and reduce the Vertical Padding:
Let us know if you need more help.
-
Support_Management Jotform SupportReplied on June 16, 2016 at 11:13 AM
Hi,
Thanks for contacting us! Yes it is possible by using our Designer Feature. Please refer to the short clip below using a cloned copy of one of your forms:
Hope that helps! If you need to learn more about our Form Designer, these videos will help a lot.
-
eurydice8Replied on June 16, 2016 at 11:46 AM
Reduce padding to 0px but still have plenty of space between the lines.
How do I customize more please?
-
eurydice8Replied on June 16, 2016 at 11:53 AM
I have manually changed the css to reduce the form line space like this
.form-line {
margin-bottom : 0;
margin-top : 0;
}
In dreamweaver it works fine, but when it goes live it goes back to big spacing
-
David JotForm Support ManagerReplied on June 16, 2016 at 1:22 PM
Is this the form you are referring to? http://www.jotformeu.com/form/61674160716355
I see it has space between the item and total:
You can reduce it by injecting the following CSS code:
.form-product-item hover-product-item{
margin-bottom: 0px !important;
}
.form-payment-total{
margin-top: 0px !important;
}
Result:
If you want to reduce more, please specify with a screenshot image the space between fields you want to reduce: https://www.jotform.com/answers/414264-How-to-include-screenshot-image-in-the-support-forum
Let us know if you need more help, we will be glad to assist you.
-
eurydice8Replied on June 17, 2016 at 4:00 AM
Yes this is the form, I have applied changes but is not taking any of them
-
eurydice8Replied on June 17, 2016 at 4:02 AM
I need all the space highlighted to be removed
-
Chriistian Jotform SupportReplied on June 17, 2016 at 4:59 AM
I checked your form http://www.jotformeu.com/form/61674160716355 and it seems the changes has reflected on the form.
Can you check it again on your end and see if the changes are now implemented?
Do let us know if you need further assistance.
Regards. -
eurydice8Replied on June 17, 2016 at 5:00 AM
I still don't see them. This is the page where the form is loaded
http://www.effewebdesigner.com/olaeuropa/new/morocco-tour-desert.php
-
Chriistian Jotform SupportReplied on June 17, 2016 at 5:20 AM
I was able to see what you are referring to. Can you try to add/inject this custom CSS code and see if it will help?
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
.form-line {
padding: 0px 36px !important;
}}
#label_25{
margin-bottom:0px !important;
}
span.form-product-item.hover-product-item {
margin-bottom: 0px !important;
}
-
eurydice8Replied on June 17, 2016 at 5:26 AM
I have, but only the size of the text has reduce, the space still remains. I need the form to be "compact" because as it is it takes too much space on the right hand side.
-
eurydice8Replied on June 17, 2016 at 5:44 AM
When I remove this padding from dreamweaver it shows much more compact, but if I paste the same code into the css it does not apply the space changes.
padding: 12px 2px; to padding: 0 2px;
.form-line, .form-line.form-line-column {box-sizing: border-box;padding: 0 2px;width: 100%;}Still does not show it as compact as I would like it to be. -
Chriistian Jotform SupportReplied on June 17, 2016 at 9:26 AM
Hi,
I checked your website and the only vertical spaces that can be reduced are the ones shown highlighted below. Are these what you are referring to?
To reduce those spaces, can you please inject this custom CSS?
.form-all {
padding-top: 0px;
}
span.form-sub-label-container:last-child {
height: 26px;
}
span.form-payment-total {
margin-top: -10px !important;
}
Do let us know how it goes.
-
eurydice8Replied on June 17, 2016 at 9:57 AM
Much better, it works perfectly now!
Thank you very much for your support! -
Chriistian Jotform SupportReplied on June 17, 2016 at 10:36 AM
You are welcome. Glad to hear it worked. Feel free to contact again if you need further help.
Cheers :)