Is there a right way to stack radio buttons in Bulma?
Their example places each button on the same line:
<div class="control">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
I'm hoping to get something like this:
Would it be as straight forward as adding <br> tags, or does Bulma have a different better way for maintaining responsiveness?
A <br> tag between labels will work just fine.
While <br> works fine, it does not allow you to configure space between radio options flexible. For example, I can see a space between options in your example image.
In order to achieve that, I've added the following class to my SCSS:
.radio-list {
.radio {
display: block;
& + .radio {
margin-left: 0;
margin-top: .5em;
}
}
}
And now just add radio-list class to your control like this:
<div class="control radio-list">
<label class="radio">
<input type="radio" name="foobar">
Foo
</label>
<label class="radio">
<input type="radio" name="foobar" checked>
Bar
</label>
</div>
Now it looks like this:
Related
I have the following html code, which contains input radio and label for it, when I turn windows narration (voiceover) on, it highlights only radio button:
But, I want input + label to be highlighted together:
is there any way to achieve this?
Here's my code:
<div>
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
I overcame the issue by changing markup a bit. I added wrapper div:
<div class="radio-wrapper">
<input type="radio" id="radio1" name="radio1" checked>
<label for="radio1">
Field label
</label>
</div>
And made radio button width & height 100% and display: inline-block;
Now it's acting as it should.
I'm using only HTML and CSS without JavaScript. Initially the code should only show first radio button with it label, if user clicks on it, the second radio button and second label should appear and the first should disappear etc. I have no idea how to achieve this result. I suppose that the problem is in the location of tags. I don't know how to write css styles to do this task. Could you tell me how to solve this problem? The code:
<div>
<label for="radio-1" class="label-1"> <input type="radio" id="radio-1" name="group"> </label>
<label for="radio-2" class="label-2"> <input type="radio" id="radio-2" name="group"> </label>
<label for="radio-3" class="label-3"> <input type="radio" id="radio-3" name="group"> </label>
</div>
My idea is to hide all inputs and labels except ones right after a checked input (use of sibling selector +). To make it work I've added a hidden checked radio before all others.
Based on the question it is not clear what should happen if the last input is checked.
input,
label {
display: none;
}
input:checked + label + input,
input:checked + label + input + label {
display: inline;
}
<div>
<input type="radio" name="group" checked hidden><label hidden></label>
<input type="radio" id="radio-1" name="group"><label for="radio-1" class="label-1">Label 1</label>
<input type="radio" id="radio-2" name="group"><label for="radio-2" class="label-2">Label 2</label>
<input type="radio" id="radio-3" name="group"><label for="radio-3" class="label-3">Label 3</label>
</div>
I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>
The following HTML is generated from a library and cannot be changed in any way, so I need a CSS only solution for my problem. I would like for the radio buttons to appear vertically instead of left to right to each other like so
This is my code.
<span class="buttonset" id="test">
<input type="radio" id="test_1" name="test" value="CC">
<label for="test_1">Option 1</label>
<input type="radio" id="test_2" name="test" value="PL">
<label for="test_2">Option 2</label>
<input type="radio" id="test_3" name="test" value="AL">
<label for="test_3">Option 3</label>
<input type="radio" id="test_4" name="test" value="HL">
<label for="test_4">Option 4</label>
<input type="radio" id="test_5" name="test" value="CL">
<label for="test_5">Option 5</label>
<input type="radio" id="test_6" name="test" value="CL">
<label for="test_6">Option 6</label>
</span>
See also http://jsfiddle.net/QHvhs/
Is there a pure CSS way to get a new line after each input and label element?
you can use css3 pseudo selector :after to insert a line break after every label, making the list vertical.
.buttonset label:after {
content:"\A";
white-space:pre;
}
live demo: Fiddle
This is more semantically better.
You shouldn't have the form elements inside of a SPAN, but rather use DIV.
<span class="buttonset" id="test">
to
<div class="buttonset" id="test">
And the way you should wrap LABEL is
<label for="test_6"><input type="radio" id="test_6" name="test" value="CL"> Option 6</label>
You can then use CSS selector in a better semantic way
.buttonset label {
display: block;
}
Im having the following html for radio buttons,and I have added the css also
<br/><br/>
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<br><br>
<br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
<br><br>
its css is
/*
Hide radio button (the round disc)
we will use just the label to create pushbutton effect
*/
input[type=radio] {
display:none;
margin:10px;
}
/*
Change the look'n'feel of labels (which are adjacent to radiobuttons).
Add some margin, padding to label
*/
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
/*
Change background color for label next to checked radio button
to make it look like highlighted button
*/
input[type=radio]:checked + label {
background-image: none;
background-color:#d0d0d0;
}
but the radio buttons doesnt align in one line
here is the jsfidlle http://jsfiddle.net/8ew6g/3/
heres the link http://jsfiddle.net/8ew6g/9/ [solved]
The radio button is below payment mode label,i have applied some css on it,so it wont look like a basic rabio button
Update:
This resource might also be useful, as it uses similar code and the result is inline.
I would suggest following this advice and then wrapping your code with the title in a fieldset. This will allow you to make a legend, so your code will look like this:
<fieldset>
<legend><strong>Payment Mode- Select your payment mode</strong></legend>
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Debit Card</label>
</fieldset>
You will also want to add this to your CSS:
fieldset {
border: none;
}
You can try this:
<table>
<tr>
<td>
<input type="radio" id="radio1" name="radios" value="CC" checked />
<label for="radio1">Credit<nobr/> Card</label>
</td>
<td>
<input type="radio" id="radio2" name="radios" value="DB">
<label for="radio2">Debit<nobr/> Card</label>
</td>
</tr>
</table>
in order to make sure that the line doesn't break between the two words, which happened when I tried it on your Fiddle.
Your HTML is rather muddled, particularly given the div elements tagged as table and row, so I am not quite sure what to make of it. I am hesitant to recommend a table, particularly in light of this, so maybe you should consider if there is something you could do other than using completely fake radio buttons.
Remove the two <Br /> tags you have between the radio buttons
and wrap the radio buttons with <div> and increase its width to about 180px
like:
<div style="width:180px;">
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
</div>`