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

Discussion

Discussion

New Form Design field spacing

posted on January 18

Anyone who has used the new form designer has probably noticed their form are longer as the field size are taller than in the classic designer. 

I would like to reduce the field sizes and spacing to make a form more compact. looking for a little CSS help.

Thanks

0 0
replied on January 25

Also, I found that using the below css helps as well as the form is set to a line height of 1.5 as default.

.form-q {line-height:1;}

This reduces it to 1 which compacts things as well

0 0
replied on January 25 Show version history

Thanks Brian. this is great, thank you

As an FYI, with a little testing  (OnPrem) I did find that if you use .pdc in the CSS instead of your CSSclass names ie :".pdc fl-single-line{", it applies to all of the fields as opposed to just the fields with the Class added to them

/* No Padding for Radio Buttons */
.pdc fl-radio {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding for drop-downs */
.pdc fl-dropdown {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding For Single Line */
.pdc fl-single-line {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding for Custom HTML */
.pdc fl-custom-html {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

 

0 0
replied on January 25

Steve, the examples here are not exactly for the size of the fields, but I have been putting this in to eliminate the "padding" between the fields. Below are examples, but can be added for about any fields (date/time, signature, multi-line, etc.) 

 

/* No Padding for Radio Buttons */
.noPaddingRadio fl-radio {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding for drop-downs */
.noPaddingDropDown fl-dropdown {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding For Single Line */
.noPaddingSingle fl-single-line {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
/* No Padding for Custom HTML */
.noPaddingCustomHTML fl-custom-html {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.