Adjust Label Size using CSS Class

replied on May 9, 2017 • Show version history

Hello Evan,

If I understand you correctly, you can accomplish this resizing for all label elements and elements with the .cf-field class as follows:

label {width: 50%; text-align:left;}
.cf-field {width: 50%;}

The above CSS sets that desired properties for every label in the form and all elements that include the class .cf-field.

If there is a small subset of the fields that you need styled differently, it might be most effective to apply the above CSS to your form and change the CSS for the outliers individually. For example:


#outlierID1 tagname {property: value; property2: value2;}
#outlierID2 .class-name {property: value; property2: value2;}

In general, do not specify IDs if you'd like to apply a given set of CSS to all elements of a given type (tag) or to all members of a class.

I hope this works!

Rob

1 0

View 7 previous replies

replied on May 9, 2017

@████████

I'm at about a 50/50 split on fields that I'm looking to adjust the label on. (About 100 need adjusting, about 100 do not).

I like your approach to this. However, it sounds like either way, my particular form will require a large amount of manual adjustments, either to the labels, or to the outliers.

0 0

replied on May 9, 2017

Hi Evan,

That is a lot of fields!

Unfortunately, it does sound like you will have to do many manual adjustments to make your form look the way you want it to look.

If you setup a form with a large number of fields in the future and only need to apply similar styling only to a subset, like in your current situation, you could always assign the fields a CSS class when you are creating them and then define that class in the CSS and JavaScript tab for that form. For example:

Then you can style those elements like so:

.different {width: 50%;}
.different label {text-align:left;}

Something like this should do the trick.

Rob

2 0

replied on May 9, 2017

That's essentially what I'm looking to do, but apply changes to the label size using the CSS Class.

.rating {width: 50%;}
.rating label {text-align:left;}

Using your suggestion, that scrunches the label down.

Any suggestions on widening the label, making it more readable?

0 0

replied on May 9, 2017 • Show version history

How about this?

.rating label {width: 50%; text-align:left;}
.rating .cf-field {width: 50%;}

It's the code from your original post, just replacing #q18 with .rating...

2 0

replied on May 9, 2017 • Show version history

If I have the Advanced --> CSS class of rating, it produces this:

(Which is what the label size looks like without any modifications. The Dropdown field is smaller than not having any modifications.)

If the Advanced --> CSS Class of rating cf-field, it produces this:

0 0

replied on May 9, 2017 • Show version history

Hi Evan,

Perhaps, you can try something like below

#IDofelement .cf-label{width:50%; text-align:left;}
#IDofelement .cf-field{width:50%;}

With this approach, I got the result below:

For example, if the id of your element is 1, you can replace #IDofelement with #q1

2 0

replied on May 9, 2017

@Kentaro

Doing with your method goes back to listing each field individually, right? I'm hoping to avoid that due to the number of fields.

0 0

replied on May 9, 2017

I was playing around with this and tested the same solution Matthew suggested without achieving the desired results. Kentaro's suggestion is the only way I've gotten this to work--in other words, by using compound selectors with IDs, which you were hoping to avoid.

Since this is the case, you might be able to use JavaScript to target all elements with the rating class and iterate over them to change the definition of their '.cf-label' and '.cf-field' classes. I'll play around with this and try to come up with the right code, but Matthew is definitely more skilled at JavaScript and might beat me to the punch.

1 0

SELECTED ANSWER

replied on May 9, 2017 • Show version history

Hi again,

I was able to achieve the same result using below. Perhaps, you missed the periods?

.Field1.form-q.label-left .cf-label{width:50%; text-align:left;} 
.Field1.form-q.label-left .cf-field{width:50%;}

CSS.JPG (64.28 KB)

| Download

2 0

replied on May 9, 2017

I think we're in business! I had misinterpreted #IDofelement to mean the specific field such as #q18.

I was able to get it to work with your suggestion, while using my own class name.

Thanks to everyone for your help!

.rating.form-q.label-left .cf-label{width:50%; text-align:left;} 
.rating.form-q.label-left .cf-field{width:50%;}

3 0

Question

Question

Adjust Label Size using CSS Class

Answer

Replies

Sign in to reply to this post.