Its my beginning with Twitter Bootstrap so that question might be quite silly, but I've no idea how to solve that issue. I want to put checkbox and radiobutton in same row (should be displayed vertically aligned) but checkboxes and radiobuttons should be grouped in two separated fieldsets. I've got something like that: html snippet
but checkboxes are displayed higher than radiobuttons and putting them in the same div doesn't change anything.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2">
<fieldset>
<legend>
<h6>RB:</h6>
</legend>
<div class="row">
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
</div>
<div class="row">
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
</div>
</fieldset>
</div>
<div class="col-md-1">
<fieldset>
<legend>
<h6>CB:</h6>
</legend>
<div class="row">
<input type="checkbox" value="">
</div>
<div class="row">
<input type="checkbox" value="">
</div>
</fieldset>
</div>
</div>
</div>
This is how I did it:
<div class="container">
<div class="row">
<div class="col-xs-6">
<fieldset>
<legend>
<h3>RB:</h3>
</legend>
<div class="radio">
<label>
<input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Option 2</label>
</div>
</fieldset>
</div>
<div class="col-xs-6">
<fieldset>
<legend>
<h3>CB:</h3>
</legend>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 2</label>
</div>
</fieldset>
</div>
</div>
</div>
Have a look at the JSFiddle demo
You could use the inline form class here
or you could wrap your checkbox inputs with the checkbox class like this:
<div class="checkbox">
<input type="checkbox">
</div>
Related
I'm trying to make a checklist in a more time saving way.
I have to do this thing underneath for every page like 17 times.
So to save some time I was hoping for Emmet to be te solution.
Important to say, I want to select the three names and do everything at once. I work with Coda 2.
What's the abbreviation to produce the following code after selecting the lines below:
Video
DVD
CD
To produce:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item1" value="Done" /> Video
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item2" value="Done" /> DVD
</label>
</div>
</div>
</div> <!-- form-group -->
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" name="item3" value="Done" /> CD
</label>
</div>
</div>
</div> <!-- form-group -->
And why doesn't this work: (div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
When I try this I get:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item1" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item2" value="done"></label></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox"><label for=""><input type="checkbox" name="item3" value="done">Video
DVD
CD</label></div>
</div>
</div>
Okay I came A little bit further.
Now it works with multiple lines.
But de Video, CD, DVD stay with the last form-group.
I used this one again:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$])*
My result:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list1">
<input type="checkbox" name="item1" value="Gedaan" id="list1"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list2">
<input type="checkbox" name="item2" value="Gedaan" id="list2"/>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="list3">
<input type="checkbox" name="item3" value="Gedaan" id="list3"/>Video
DVD
CD
</label>
</div>
</div>
</div>
This worked for me:
(.form-group>.col-sm-12>.checkbox>label>input[type=checkbox][name="item$"][value="done"])*
And the generated HTML:
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item1" value="done">Video
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item2" value="done">CD
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="checkbox">
<label for="">
<input type="checkbox" name="item3" value="done">DVD
</label>
</div>
</div>
</div>
I tried yours and it works too, except for the part value=Gedaan:
Found the answer:
(div[class=form-group]>.[class=col-sm-12]>.[class=checkbox]>label[for=list$]>input[type=checkbox name=item$ value=Gedaan id=list$]){}*
{} lets the txt go on the back
How do I got about moving the checkbox label above the checkbox?
At the moment the labels are appearing on the left hand side of checkbox and I would like them above the checkboxes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<input type="checkbox" value="">
</div>
</div>
</div>
the answer to your issue is simple. All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available.
Your code would look like this...
HTML
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations
</label>
<br>
<input type="checkbox" value="">
</div>
</div>
</div>
Hope that helps!
You can change to structure as below because....
It gives flexibility to place the label and checkbox as per your need.
Not only that but also the Important Reason that why you should wrap <input> inside <label> tag is that the checkbox will function even when you click on label itself rather than only on checkbox as it was earlier.
In this example, with the structure you had, so when you click on "View Statistics" the checkbox will not be checked/unchecked. But, if you wrap <input> inside <label>, then even when you click on label itself, the checkbox functionality is achieved.
You can also refer to JSfiddle if you need https://jsfiddle.net/Dhruvil21_04/2m3asp3k/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="viewstats">
View Statistics<br>
<input id="viewstats" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewgraphs">
View Graphs<br>
<input id="viewgraphs" type="checkbox" value="">
</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label for="viewnotifications">
View Notifcations<br>
<input id="viewnotifications" type="checkbox" value="">
</label>
</div>
</div>
</div>
I'm trying to show div when one of the selects in group is checked and hide when not. I thought this should work, but it's not working.
https://jsfiddle.net/47ctm349/2/
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1"> Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2"> Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3"> Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
It should work when you click the checkbox in the middle, the div id="form-group-osobko" should appear.
I was trying not to use JS with my bootstrap.
Can't get my head around what I'm doing wrong :(
Thanks.
Your solution only works, if the div to be displayed is an adjacent sibling of the checkbox input, as that is what the + selector in CSS means.
If this div is neither a sibling nor a child you can't select it with CSS and will have to use JavaScript.
#form-group-osobko {
display: none;
}
#odber-1:checked+#form-group-osobko {
display: block;
}
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
Here would be a simple jQuery solution, using just an additional class to display the div:
$('#odber-1').change(function(){
$('#form-group-osobko').toggleClass("active");
});
#form-group-osobko {
display: none;
}
#form-group-osobko.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="odber">Způsob platby</label>
<div class="col-md-4">
<div class="checkbox">
<label for="odber-0">
<input type="checkbox" name="odber" id="odber-0" value="1">Dobírka
</label>
</div>
<div class="checkbox">
<label for="odber-1">
<input type="checkbox" name="odber" id="odber-1" value="2">Hotově při osobním odběru
</label>
</div>
<div class="checkbox">
<label for="odber-2">
<input type="checkbox" name="odber" id="odber-2" value="3">Platba předem na účet
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" id="form-group-osobko">
<label class="col-md-4 control-label" for="osobniodber">Místo osobního odběru</label>
<div class="col-md-4">
<input id="osobniodber" name="osobniodber" type="text" placeholder="14900,11000" class="form-control input-md">
<span class="help-block">Zadejte PSČ míst možného osobního odběru oddělená čárkou.</span>
</div>
</div>
Get it https://jsfiddle.net/47ctm349/5/
I just added Javascript, using Jquery. It works for any div anywhere:
$('#odber-0').on('change', function(){
if($('#odber-0').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-1').on('change', function(){
if($('#odber-1').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
$('#odber-2').on('change', function(){
if($('#odber-2').is(':checked'))
$("#form-group-osobko").css("display","block");
else
$("#form-group-osobko").css("display","none");
});
In your case no ideas with CSS.
Good luck!
I have this plunk file. In my code, I want to create 4 radio buttons but i dont know why all the radio buttons are checked when it is meant to be only one radio button checked.
http://plnkr.co/edit/IbtUGzuATbcSCmoDMH73
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>
They lack a "name" attribute. To make radio buttons work together, they need to have the same "name" HTML attribute:
<div class="row">
<label class="col-sm-3">Choose Service Category:</label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Adhoc</label>
<br/>
<span>(One Time Service)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Semi-monthly</label>
<br/>
<span>(Every 2 Weeks)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Monthly</label>
<br/>
<span>(Once a Month)</span>
</div>
<div class="col-sm-3">
<input type="radio" name="radio-group" ng-model="">
<label>Weekly</label>
<br/>
<span>(Once a Week)</span>
</div>
</div>
</div>
Wide space between label for vertical radio button and first choice. In an ideal world, I would love it to be the same amount of space as between the field labels and the top line on the fields. Any thoughts or ideas? Thanks in advance.
http://jsfiddle.net/steveadams617/MgcDU/8543/
<div class="container">
<form>
<div class="row">
<div class="col-sm-6">
<div class='form-group'>
<label for="provider_id">Provider</label>
<div>
<input class="form-control" type="text" maxlength="255" value="" name="provider_id_auto" id="provider_id_auto"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<label for='phone_us'>Phone</label>
<input class='form-control phone_us' type='text' maxlength='14' value='' name='phone_us' id='phone_us'/>
</div>
</div>
</div><!-- .row -->
<div class='row'>
<div class="col-sm-6">
<label for="med_coverage_id">Insurance Coverage</label>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="1" checked />
Pending
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="2" />
Covered
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="med_coverage_id" value="3" />
Needs Prior Approval
</label>
</div>
</div>
</div><!-- .row -->
</form>
</div><!-- .container -->
Your div .radio has a margin-top of 10px. You can manually adjust this like so
<div class="radio" style="margin-top: 0px;">
<label>
<input type="radio" name="med_coverage_id" value="1" checked="">Pending </label>
</div>
or of course edit the stylesheet or add your own style to the .radio-class (eg if you are using a CDN).