HI I am trying to draw a list of radio button using bootstrap 3.2, I have enclosed by buttons in a toolbar, I assumed this would draw the buttons next to each othe, with no gaps between the buttons.
Instead it draws a line of buttons with rounded edges with a gap between each button
My bowser is "Version 39.0.2171.65 Ubuntu 14.04 (64-bit)", so I assume that I have a modern layout engine. I assumed this would work 'out of the box'
There is a reference in my code to bootstrap.css
Have I missed something ?
Code is
<div class='btn-toolbar' role='toolbar' aria-label='...'>
<h2>Buttons</h2>
<div id='btn-group btn-group-justified' role='group' data-toggle='buttons' aria-label='...'>
<label class="btn btn-primary">
<input type='radio' id='layer1Button' autocomplete='off' name='options' >Fee
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer2Button' autocomplete='off' name='options' >Fie
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer3Button' autocomplete='off' name='options' >Foe
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer4Button' autocomplete='off' name='options' >Foo
</label>
</div>
</div>
Try this:
Jsfiddle
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" id="layer1Button" autocomplete="off" name="options" > Fee
</label>
<label class="btn btn-primary">
<input type="radio" id="layer2Button" autocomplete="off" name="options" >Fie
</label>
<label class="btn btn-primary">
<input type="radio" id="layer3Button" autocomplete="off" name="options" >Foe
</label>
<label class="btn btn-primary">
<input type="radio" id="layer4Button" autocomplete="off" name="options" >Foo
</label>
</div>
Related
How to create a switch to set a boolean in separated "Yes" "No" buttons?
I work with angular and typescript, so a radio button doesn't work as I need a boolean type.
I mean how to have:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
In following style:
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">YES</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">NO</label>
</div>
<div class="form-row">
<div class="column">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active" for="visualContagi">
<input type="radio" name="options" id="visualContagi" checked> Contagi
</label>
<label class="btn btn-primary" for="visualGuariti">
<input type="radio" name="options" id="visualGuariti" checked> Guariti
</label>
<label class="btn btn-primary" for="visualDecessi">
<input type="radio" name="options" id="visualDecessi" checked> Decessi
</label>
<label class="btn btn-primary" for="visualRicoveri">
<input type="radio" name="options" id="visualRicoveri" checked> Ricoveri
</label>
<label class="btn btn-primary" for="visualTotPos">
<input type="radio" name="options" id="visualTotPos" checked> Totale Positivi
</label>
</div>
</div>
</div>
Hi, I have this radio button group as part of a form. The problem is that the buttons all get the "active" class applied to them when I load the webpage. I haven't written any javascript, it's just bootstrap, and this CSS applied to remove the outline when I click on the buttons:
.btn-primary.focus, .btn-primary:focus {
box-shadow: none;
}
I'm using the latest version of Firefox on macOS.
What I am noticing is that each of your <input type="radio" elements have the checked attribute attatched to them. If you remove that, then it should be fixed. I hope this helps!
How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
In case #1 works, in case #2 it do not works. Check the code bellow:
<div class="container">
<div class="row">
<h1>Radio Group #1</h1>
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"> 1
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio3" value="option3" type="radio"> 3
</label>
</div>
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="year" value="2011" type="radio">2011
</label>
<label class="btn btn-default">
<input name="year" value="2012" type="radio">2012
</label>
<label class="btn btn-default">
<input name="year" value="2013" checked="checked" type="radio">2013
</label>
</div>
</div>
</div>
You can see it in action here: http://bootply.com/84165
Assuming you want a default button checked.
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="year" value="2011">2011
</label>
<label class="btn btn-default">
<input type="radio" name="year" value="2012">2012
</label>
<label class="btn btn-default active">
<input type="radio" name="year" value="2013" checked="">2013
</label>
</div>
</div>
Add the active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.
A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:
$(':input:checked').parent('.btn').addClass('active');
insert right after
$('.btn').button();
You have to use active in the label to make it work as mentioned above. But you can use checked="checked" and it will work too. It's not necessary but it's more legible and makes more sense as it is more html format compliance.
Use active class with label to make it auto select and use checked="" .
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>
In case you want to use bootstrap radio to check one of them depends on the result of your checked var in the .ts file.
component.html
<h1>Radio Group #1</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
<label [ngClass]="checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio1" value="option1" type="radio"> TRUE
</label>
<label [ngClass]="!checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio2" value="option2" type="radio"> FALSE
</label>
</div>
component.ts file
#Component({
selector: '',
templateUrl: './.component.html',
styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
checked = true;
}
Preselecting a radio button in twitter's bootstrap without using jquery.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="athletebutton" value="1" checked> Athlete </label>
<label class="btn btn-primary">
<input type="radio" name="options" id="coachbutton"> Coach </label>
</div>
Mark the label class with active
See screenshots & video here:
Video:http://d.pr/v/b3Gm
Screenshot: