I want to include checkbox in Twitter Bootstrap drop-down menu's but I'm unable to get the menu text (in <a>..</a>) to sit beside the checkbox. I have read up on the CSS used for Forms and have tried a variety of things to no avail.
This is what I think should work, but doesn't.
<li><label class="checkbox" ><input type="checkbox">aaa</label><a href="#" style="float:left"></a></li>
Neville
A line of javascript to resolve the problem in Oleg answer: http://jsfiddle.net/Wsc9r/
Wrap your checkbox into A-tag like this:
<li>
<a>
<label>
<input type="checkbox">
Some text
</label>
</a>
</li>
Also you may add this CSS rules
.dropdown-menu input {margin-top: -4px;}
.dropdown-menu label {margin: 0;}
<a> tags I added .checkbox but overrided margin-top and margin-bottom to make the spacing more natural. EG: <a class="checkbox" style="margin-top: 5px; margin-bottom: 5px>checkbox labels and inputs</a>. Maybe similar to CSS rules posted in the answer.
dropdown-menu-form class to the parent <ul> and it works great.Try this jquery plugin for bootstrap : https://github.com/davidstutz/bootstrap-multiselect
Heare is a good example of that: https://codepen.io/bseth99/pen/fboKH
And heare is the code:
var options = [];
$('.dropdown-menu a').on('click', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function() {
$inp.prop('checked', false)
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', true)
}, 0);
}
$(event.target).blur();
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox" /> Option 6</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
});
</script>
</head>
<body>
<select id="lstFruits" multiple="multiple">
<option value="1">Choice01</option>
<option value="2">Choice02</option>
<option value="3">Choice03</option>
<option value="4">Choice04</option>
<option value="5">Choice05</option>
</select>
</body>
</html>
