You are viewing limited content. For full access, please sign in.

Question

Question

Control space between fields (between lines of fields)

Forms Version 10
Updated January 23, 2020
asked on January 23, 2020

I don't like how fields are jammed together sometimes, especially when there is a new section starting.  Is there a way to control how much space is left above or below each line of fields?

I know I can go into Themes, Customize, Fields, Spacing, but sometimes its just a few specific fields that look too tight.  How could I force some space under each of those fields?

0 0

Answer

SELECTED ANSWER
replied on January 23, 2020

You would have to use CSS to apply Margin to the field such as

#q1 label {margin 10px 0px 0px 0px!important;}

This would add 10px of spacing above the Field Label

The order of 10px 0px 0px 0px is top, right, bottom, left

You could also use the following as another way to target where to apply the Margin

Margin-top:10px

Margin-right:10px

Margin-bottom:10px

Margin-left:10px

It would be easiest if you added a CSS class such as MRG10 to the Field, so then a line such as below would apply to any field you added the CSS Class to

.MRG10 label {margin 10px 0px 0px 0px!important;}

 

In some cases you may want to target the field instead of the label, in those cases, it would be 

.MRG10 .cf-field {margin 10px 0px 0px 0px!important;}

 

Hope this helps

1 0
View 1 previous reply
replied on January 23, 2020 • Show version history

Thanks, Steve.  I'll have to try a few combinations of that.  My first attempt did not cause a change.  What could block this from working?

0 0
replied on January 23, 2020 • Show version history

Okay, so I found a combination that sees a result, but it works slightly different than yours.

The #q141 is the field about SqMtr/SqFt.

The #q140 is the field about Acres/Hectares.

The #q114 is the section header below both.

So, I need this to target the radio button field label, not the radio button's labels themselves.  I'll try targeting the "bottom" instead!

And for some reason, the Section Header did not respond at all (tried a number of combinations for it).

0 0
replied on January 23, 2020

Unfortunately, I believe the targeting whether top or bottom is actually effecting both the radio button FIELD labels as well as the radio button labels themselves, which does give me the space between FIELDs, but also gives more space been the field label and the radio buttons themselves.  Can we target just the fields?

               

0 0
replied on January 23, 2020 • Show version history

This worked for the section header!

#q114 .cf-section-header {Margin-top:10px!Important;} 

That is an improvement all by itself, because it is often the section headers that I find are too close to fields above them.  I like a bit of space between sections!

0 0
replied on January 23, 2020 • Show version history

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...