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

Question

Question

Increase label width for radio button

asked on October 19, 2018

Is there a way to increase the width of the label for a radio button?

Thanks,

0 0

Replies

replied on October 21, 2018

The normal label width CSS works for a radio button.  This increases the field label width e.g.:


#q1 label {width:340px;}

/*The line above forces the radio buttons to be one-above-the other.  But you can also space out the radio buttons.  This is an example for two buttons on one line:*/


#q1 .cf-small {width:200px !important;}
#q1 .cf-field {width:200px !important;}
#q1 span.choice {width: 50% !important;}
#q1 .choice .form-option-label {max-width : 60%;}

 

Where #q1 is the field number and '!important' over-rides the default settings.

The radio button was set to 'Side-by-side'.

The last line makes sure the radio button label is in line with the button.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.