How can I add more space in between the fields?

Scorecard Correction Form

How can I add more spaces between the fields that are below the 4 drop down menus.

Thanks for your help.

V

I have cloned your form named "Scorecard Correction Form" on my side in order to test it. 

You can inject following CSS codes to the form in order to add extra space between the text boxes and drop-down lists as you can see in the following screenshot below:

#id_5{

padding-top: 40px;

}

#id_14{

padding-top: 40px;

}

I hope this helps.

Scorecard Correction Form

What I really want is to increase the space between field 5 and field 14 on the row.  Or find a different way to align them farther apart.

Thanks for helping me on this.

V

My suggestion would be to make the textbox field width to 100% so it fits on its column container.

To do that inject this CSS codes to your form.

[data-type="control_textbox"] .form-textbox, 

[data-type="control_fullname"] .form-textbox,

[data-type="control_email"] .form-textbox,

[data-type="control_textarea"] .form-textarea, 

[data-type="control_dropdown"] .form-dropdown,

[data-type="control_dropdown"] .form-input, 

[data-type="control_dropdown"] .form-input-wide {

    width : 100% !important;

    max-width: none !important;

}

Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Result:

Scorecard Correction Form

I figured this one out.  It's putting this css code in for the first field:  

/* set the two fields to share half of the form width each */

#id_5 {

    width: 50%;

}

Now I would like to know how to get all of the fields to be aligned the same way on the left margin.  Currently, field 17 is farther to the left than the other fields.

Thanks again,

V

Any change with the offered solution above?

Anyway, about your concern, this is how your form currently looks like in the preview.

It is actually the width of the Team Names field that is overextending to the right which makes them looks connected. By simply reducing the width of this field, it should create more space. 

Scorcard Correction Form

The spacing between the fields below the drop menus shows like Match ID  and Team Names and so forth is showing fine now but the Your Name field is to the left and can't move it like the others.  Also when I do the form preview it shows all the fields in question close to each other.

Thanks for your help.

V

I have made a test with your form by expanding its width. What I found is that the fields are actually sitting next to each other. As a result, the fields are quite difficult to be controlled due to its column settings and some parts where it automatically moves down due to its responsive state.

Rather than give you a bit more instructions which may come confusing, I just addressed the said issue and the field that extends to the left is now fixed, as well as the spacing between fields.

Please let us know if there are others that you need to be adjusted.

Scorecard Correction Form

Thank you so much for all your help.  I have one more favor to ask and I think it will be the last one with this form.  

Under the Team Names it shows the example in two lines instead of being in one line like New England Patriots vs Atlanta Falcons

The form shows it in two lines and the preview shows one line.  

Thank you for correcting it.  

V

I have recloned your form named "Scorecard Correction Form" again. I have seen that the sub-label of "Team Names" field is already two-lines in the form builder as seen below:

However, the sublabel is one-line in the published form as seen below:

I have forwarded this issue to our software developers in order to investigate it.

Besides, Injecting following CSS codes to the form will fix the problem as seen the screenshot below:

#input_14, .form-sub-label {

  width: 100px !important;

}

I hope this helps.

Let us know if you need any further assistance. 

Scorecard Correction Form

Thanks again for your prompt responses.  Jotform's customer service is unbelievable.

I tried to enter the code for the sub label under Team Names and it didn't work.  It only works in the preview.

V

Still no update from the developers yet. They will reply via this thread as soon as it is possible for them.

For the meantime, while the issue is being investigated, please replace your existing .form-label CSS code at the bottom using this one:

.form-label, .form-sub-label{
  width: 230px !important;
}

Thanks.

Scorecard Correction Form

Thank you so much!!! That worked great.  One last thing, the support group had given me the code below to delete the logo space and for some reason the add-your-logo is back.

.jotform-form {

    padding: 0px 0 !important;

}

Thanks!

V

If you are referring to this one on the part of the form builder:

Unfortunately, that cannot be removed as it is a placeholder for the builder for ease of access for the users to add their logo. That, by default, does not appear when the form is published.

But if I am misunderstanding your concern, please provide us more details on the matter.

Thanks.

Video & response from support

Scorecard Correction Form

Thanks for the response.  I have attached the previous response with the code to delete the space add your logo.  I am trying to keep the forms in one page when we print them. The attached code and worked and that logo space was gone.  We added a lot of codes to the form  and now it doesn't work.

Thanks

V

I inspected your CSS codes and I see no issues. They are working fine. Your form is displayed in a single page on print preview.

Take note that it is not possible to remove the JotForm branding logo if you are on the free plan.

If I have misunderstood your question, please let us know what you are trying to achieve this time. Thanks