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

Discussion

Discussion

New Form Design field spacing

Forms Laserfiche Cloud
Updated March 21
posted on January 18, 2023

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

1 0
replied on March 21

Any luck with figuring out how this is done? I too would like to limit the space between fields vertically. Tried the CSS scripts to limit the buffer space but they did not make a difference. The main goal is to get the saved form to not be so many pages long, so if there is a different way of adjusting that setting I'll take that information also. Thank you. 

1 0
replied on February 7, 2023

@laserfiche, feature request, we would like to have more control over the form spacing in Themes in the modern form designer. Thank you

4 0
replied on January 25, 2023

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, 2023 • 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 February 6, 2023 • Show version history

I used to just go to Themes and I could select fields and spacing, then change the spacing to what I wanted, but this option seems to have been pulled.

I tried the above CSS but notice no difference.

Edit: Never mind it did make some difference, still a ton of spacing and tables still have a lot of spacing but the problem was just that I was putting it into the wrong window in the new editor.

0 0
replied on February 7, 2023

FYI:

I also tested with Cloud and found that using the .pdc did not work.

I also tested .form-q {line-height:1;} and did not see that it worked either.

0 0
replied on February 7, 2023

I flipped back and forth and it made a slight difference, but it is not as flexible as the option used to be in themes. You used to be able to stack fields right on top of each other.

0 0
replied on January 25, 2023

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.

Details
Related Posts
Loading ...