- IEHAAsked on January 08, 2015 at 04:32 PM
I am simply wanting to move my text boxes closer together vertically to mimic the address quick tool. Does this have to do with the "padding" I am seeing in the design tool? If so, can I adjust the padding of specific text boxes?
As a follow-up, is there a way to apply a CSS to a selected group of fields as opposed to individually or the form as a whole?
This is a re-post of a comment on Customize Your Form Using Custom CSS Codes
- JotForm SupportdavidAnswered on January 08, 2015 at 06:14 PM
You are correct, typically changing the padding in the form designer does move the fields closer together. To apply this only to a specific field or element, first click on the CSS tab in the form designer:
After that, single click on an element to change all elements of that type, or double click on an element to change on that specific one:
Once you have the field selected, in your case you would want to adjust to the padding:
I hope that helps. Let us know if you have any further questions and we will be happy to see what we can do.
- IEHAAnswered on January 09, 2015 at 09:35 AM
I attempted to adjust the padding as per your instructions; however, I did not notice any discernible effects? It appeared I could alter the height of the text box through multiple different selections at the top of the CSS editor (height, margin, etc...), and the field width seemed pliable as well. I was unable to decrease the vertical space between any of my fields. My end goal is to have individual address fields formatted to appear exactly as the address quick tool, but with the extra fields "Business Name" and "County".
Is there an invisible header or title line that is occupying the space? As I cannot select or see anything, I would not think that is the case.
- CharlieAnswered on January 09, 2015 at 12:08 PM
I'm not sure how you would like your form fields with business name and other extra fields to be formatted. I've cloned your form and edit the custom CSS code there. You can check the cloned form here: http://www.jotform.com/form/50084589375970
This is how it looks like in my end.
We can still, however, edit it more.
What I've changed:
1. Changing the paddings top, bottom, right and left but specific to only a couple of forms.
2. Changed the widths of the form fields to match the original one.
You can clone the cloned form by following this guide: How To Clone Existing Form using URL. From there, you can explore the CSS codes that I edited.
Let us know if you need more information on this.
- IEHAAnswered on January 09, 2015 at 12:14 PM
That will actually work out well. How do I go about importing your cloned version and overwriting my current formatting? Also, I attempted to adjust the padding; however, it was already set to 0s across the board and only seemed to expand the field when I increased the numbers. Do you have any idea what I was doing wrong?
- JotForm SupportdavidAnswered on January 09, 2015 at 01:32 PM
To clone the form my colleague created, follow the steps in this guide:
Increasing the numbers will indeed increase the spacing, however often times using 0 negative numbers will work to decrease it. I did a bit of digging through the CSS and it appears as though there were several other increases in padding including one percentage based increase. I did a bit more adjusting to my colleagues form to get the spacing to look like this:
I hope it is a bit closer to what you are looking for.
- IEHAAnswered on January 09, 2015 at 02:30 PM
The changes you made looked great, and the instructions you provided for importing a cloned form. I am still looking to understand the system so that I may make my own adjustments, but your assistance was greatly appreciated.
- JotForm SupportdavidAnswered on January 09, 2015 at 03:38 PM
To make the adjustments, I actually sifted through the CSS for the entire form. There were a few overlapping padding issues that were I believe applied from a template. This one specifically was causing the most change and I believe also overriding some of the changes you were trying to make:
By click on each piece of the form, then sifting through the overall CSS, I removed most of the duplicates.
I hope that information helps a bit more to understand how I made the changes. Let us know if you have any further questions and we will be happy to help.