How to display checkbox / radio fields inline
Use CSS to display checkbox / radio fields inline
By default, in the default bundle, the question labels are above the question:
To make a radio button or checkbox label in-line with the choices, you can use this class:
.inline-label label.field-label {
float: left;
width: auto;
margin: 0 1.5rem 0 0;
}
and give the radio button or checkbox this class as a render attribute:
That will result in this:
Note that if you want this effect for all questions on the form, it is possible to use this css:
form label.field-label {
float: left;
width: auto;
margin: 0 1.5rem 0 0;
}
But actually seeing it for all fields, including text fields, will also require adjusting the css for the answer. Currently this includes width: 100%, which pushes the label onto another line. This would need to be adjusted to give room for the label, such as:
form input[type=password], form input[type=text] {
width: 80%;
}
Updated over 3 years ago