How to Display Checkbox and Radio Fields Inline
By default, in the default bundle, the question labels are displayed above the question.
![Radio2](https://s3.amazonaws.com/community.kineticdata.com/images/Radio2.jpg)
Follow these steps to make a radio button or checkbox label in line with the choices:
- Enter this CSS in the Custom Head Content (or at the bundle level to use this class across forms):
.inline-label label.field-label {
float: left;
width: auto;
margin: 0 1.5rem 0 0;
}
- Assign the class to the radio button or checkbox as a render attribute:
![Radio4](https://files.readme.io/d28fa0b-inline_checkbox_radio_render_attribute.png)
- The label is moved to be inline with the field options:
![Radio3](https://s3.amazonaws.com/community.kineticdata.com/images/Radio3.jpg)
If you want to apply this effect to all questions on the form, you can use this CSS:
form label.field-label {
float: left;
width: auto;
margin: 0 1.5rem 0 0;
}
To see the change on all fields, including text fields, you have to adjust the CSS for the answer. The current CSS uses a width of 100%, which pushes the label onto another line. This would need to be adjusted to give room for the label, as in the following example:
form input[type=password], form input[type=text] {
width: 80%;
}
Updated about 1 month ago