Question

CSS to remove space between lines

Forms Version 10

Updated September 8, 2021

asked on August 30, 2021

I can't seem to target the input using a class. I can target all the desired field labels using a class of NoLabel but I can't make it work to remove space above all the lines.

I want there to be no space between the lines of these read-only fields. The removal of the label works perfectly.

But doesn't work for the fields. Tried all kinds of combinations, including giving this a separate class of ReduceSpace but that didn't work either. Any ideas why or what might work?

0 0

Answer

SELECTED ANSWER

replied on August 31, 2021

The issue is that the margin/padding is not on the .cf-field, but on the parent object (.NoLabel). Also, it is a padding applied and not a margin, so your CSS should look like:

.NoLabel .cf-label {display: none;}
.NoLabel {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

0 0

replied on September 2, 2021 • Show version history

Thanks, Bert! I'm am definitely getting a result now! It's not as clean as in a table setting, but I needed specific words in these fields, like in a table already filled out.

Let me know if there are any other tricks I can use to set this up better. Like... in the one below, how can I get the Hazard Found label to go away on the last three rows but not have the Yes and No labels also go away? Thanks!

0 0

replied on September 7, 2021

Hi Connie

I throw a CSS class on my Radio fields "RadioBtn"

Then I use the following CSS to hide the label

.RadioBtn label {display:none;}

1 0

Replies

replied on September 7, 2021

When I created and tested the provided solution, I was using Forms 11, but with the classic designer.

In the new designer, the CSS class names and locations have changed, and it does not putt hem as close as in the classic designer.

You had asked about how to remove the labels of other fields. You can apply multiple CSS Classes to the same field by separating them with a Space. So then we can apply a "NoLabel" class where you wish to remove the label and a "NoPad" class where you wish to remove the padding.

For the new designer, the CSS is


.NoLabel .field-label {display: none;}
.NoPad .fl-component {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

This then displays as

1 0

replied on September 8, 2021

Thanks, Bert! I tried again, but for some reason it did not change. Any ideas why?

0 0

replied on September 3, 2021

@████████, we just installed Forms 11 today. Are you on Forms 11? Asking because the .NoLabel CSS you helped me with on the Forms 10 version is not working on the Forms 11 version of the form (using the new designer). I did copy the CSS from the old form into the new designer section for CSS, but it is behaving as if there was no classes assigned to any fields!

0 0

You are not allowed to follow up in this post.

Question

Question

CSS to remove space between lines

Answer

Replies

Sign in to reply to this post.