I am simply wanting to move my text boxes closer together vertically to

What is JotForm?

JotForm is a freeonline form builder which helps you create online forms without writing a single line of code.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

Why do you not want to answer this thread?(Your answer will be sent to Jeanette and Aytekin)

IEHA

Asked 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?

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.

IEHA

Answered 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.

Regards,

-Tim

Charlie

Answered on January 09, 2015 at 12:08 PM

Hi Tim,

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.

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 Support

david

Answered 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:

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.

Regards,

-Tim

JotForm Support

david

Answered 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.