Geek Answers Handbook

Check the Twitter bootstrap dropdown menu

I want to enable a checkbox in the Twitter Bootstrap dropdown menu, but I can’t get the menu text (in <a> .. </a>) to sit next to that checkbox. I read in the CSS used for forms and tried many things to no avail.

This is what I think should work, but does not.

<li><label class="checkbox" ><input type="checkbox">aaa</label><a href="#" style="float:left"></a></li>

Neville

+8
drop-down-menu twitter-bootstrap
source share
6 answers

Try this way But there is a problem

+5
source share

Javascript string to solve the problem in Oleg’s answer: http://jsfiddle.net/Wsc9r/

+11
source share

Put your flag in tag A, for example:

 <li> <a> <label> <input type="checkbox"> Some text </label> </a> </li>

You can also add these CSS rules.

 .dropdown-menu input {margin-top: -4px;} .dropdown-menu label {margin: 0;}
+9
source share

Try this jQuery bootstrap plugin: https://github.com/davidstutz/bootstrap-multiselect

+4
source share

A good example of this: https://codepen.io/bseth99/pen/fboKH

And this 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" />&nbsp;Option 1</a> </li> <li> <a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox" />&nbsp;Option 2</a> </li> <li> <a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox" />&nbsp;Option 3</a> </li> <li> <a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox" />&nbsp;Option 4</a> </li> <li> <a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox" />&nbsp;Option 5</a> </li> <li> <a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox" />&nbsp;Option 6</a> </li> </ul> </div> </div> </div> </div>
+1
source share
 <!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>
0
source share

More articles:


All Articles