Help Needed! CSS changes to Form

replied on January 3, 2022

I'm curious if you are trying to get it to remain on one line, why are you adding CSS for the field at all? The default layout without custom CSS in Forms should be using the whole width of the form for the field.

I suspect that the line break you see in your checkbox labels is because of the 50% width you have applied to the cf-field class.

0 0

View 5 previous replies

replied on January 3, 2022

Prior to adding this I still saw the wrapping with the checkbox. Went the CSS route once I realized the text would not stay on 1 line.

0 0

replied on January 3, 2022

That's weird.

I tried replicating the behavior and wasn't having any luck. May just be due to differences with versions.

It would help to get a screenshot drilled a little deeper into the Inspect Elements. In your screenshot before, we can see thee span elements with the "choice" class, but we really need to see the third one expanded, and the label within it selected, along with the styles associated with that element.

You're screenshot will look something like this:

0 0

replied on January 3, 2022 • Show version history

Is this better?

0 0

replied on January 3, 2022 • Show version history

No, the span elements with the "choice" class are still closed - I can't see their contents in your screenshot (about 60% of the way down).

You'll need to expand the third one of those "choice" items, and then select the label element underneath it, which should cause the "styles" preview to display for that label element.

Can you do a need screenshot with that? It should look very similar to the screenshot I posted.

What I'm hoping to see is if there is some other CSS rule that is being applied for you that causes the label to wrap the text, which is different than the behavior I'm seeing. If I can see all the CSS applies to the label on your form, I might be able to figure out why it is doing that.

0 0

replied on January 5, 2022

Okay so I don't know if this is related, but I was just working on a new project in my test environment in version 11, and noticed something similar.

I had a label that was not as wide as it should've been, and eventually I tracked it down to what seemed to be a built-in or auto-generated max-width.

So, I added my own max-width with !important and that did the trick.

.choice label.form-option-label {
max-width: calc(100% - 10px) !important;
}

2 0

replied on January 5, 2022

That could definitely be it @████████

Being something new you noticed on version 10 could explain why I didn't see the behavior (I'm still on version 10) while @████████ was seeing it.

That's exactly the kind of thing I was hoping to get a more detailed screenshot to track down. Your CSS code is likely going to solve Lawrence's issue. Hurray!

1 0

replied on January 6, 2022

Sorry for the delay in getting back to you @████████. I expanded the item and noticed that same CSS class @████████ referenced.

0 0

replied on January 6, 2022

No need to apologize, we all have other responsibilities after all.

That same class does exist in version 10. But I suspect something changed in version 11 that is setting that max-width value for that class and causing the line break on your form. I can't quite be certain because your screenshot doesn't include the information about all of the styles impacting the field (that section that is on the right of the screenshots I showed), but it's a pretty good bet based on the information shared by @████████.

I recommend that you include the CSS code that Jason shared on your form and see if that resolves the issue for you.

0 0

Question

Question

Help Needed! CSS changes to Form

Replies

Sign in to reply to this post.