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

Question

Question

Widen all lables

asked on July 12, 2018

This should be easy, but that answers I have found don't seem to be working.  Some of my labels are a little long, so I would like to widen them by a few characters.  I assume there some css code that would do this to all labels?  Ideally it wouldn't effect how it is viewed on mobile.

Thanks in advance?

0 0

Answer

SELECTED ANSWER
replied on July 12, 2018

Have you tried changing the label width in the form settings? Label width defaults to "Small"

If you want to adjust all of them, then this is the best thing to try first before resorting to custom CSS.

0 0
replied on July 12, 2018

Jason to the rescue!  Thanks!  Just out of curiosity what would the css be though?

0 0
replied on July 12, 2018 Show version history

The CSS tag you would want to use is cf-label. The only tricky part is the specificity because the built-in styling has a high specificity that overrides simple CSS.

Rather than fighting specificity, you could take the "scorched earth" approach and use !important

For example,

/* Does not work. Overridden by built-in styling */
.cf-label {
  width:200px;
}

/* Overrides most other styling */
.cf-label {
  width:200px !important;
}

The "correct" way would be to research the specificity hierarchy chart to get a feel for how browsers decide which styling to use when you have multiple things affecting the same element, but sometimes !important is the only option because the built-in styles are too specific to override with selectors alone.

0 0

Replies

You are not allowed to reply in this post.
replied on July 12, 2018

The CSS tag you would want to use is cf-label. The only tricky part is the specificity because the built-in styling has a high specificity that overrides simple CSS.

Rather than fighting specificity, you could take the "scorched earth" approach and use !important

For example,

/* Does not work. Overridden by built-in styling */
.cf-label {
  width:200px;
}

/* Overrides most other styling */
.cf-label {
  width:200px !important;
}

The "correct" way would be to research the specificity hierarchy chart to get a feel for how browsers decide which styling to use when you have multiple things affecting the same element, but sometimes !important is the only option because the built-in styles are too specific to override with selectors alone.

You are not allowed to follow up in this post.

Sign in to reply to this post.