Menu
If you have multiple radio buttons, each with a label, what is the most simple way to force the button/label pair to always be on the same line, and force the next pair down to the next line?
Large screen:
() Label 1 () Label 2 () Label 3
On a small screen, what I want is this:
() Label 1
() Label 2
() Label 3
But what I'm getting is something like this:
() Label 1 ()
Label 2 ()
Label 3
988
As a quick solution either you can apply colspan for your td or You can have both the radio button controls in same td so that the change due to long text wont affect the display of radiobutton.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
Looks like you need to make some HTML changes as well as CSS changes, I'd guess.
Example:
label {
display: inline-block;
}
@media screen and (max-width: 768px) {
label {
display: block;
}
}<label for="radio_1">
<input type="radio" name="radio" id="radio_1" />
Label 1
</label>
<label for="radio_2">
<input type="radio" name="radio" id="radio_2" />
Label 2
</label>
<label for="radio_3">
<input type="radio" name="radio" id="radio_3" />
Label 3
</label>
<label for="radio_4">
<input type="radio" name="radio" id="radio_4" />
Label 4
</label>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
