Geek Answers Handbook

Bootstrap multiselect dropdown width 100%

I have been using bootstrap multiselect in my web application for about 9 months. I style the dropdown width to 100% as follows:

ul.multiselect-container { width: 100% !important; } .dropdown-menu {width:100% !important;}

I just got a new version because it had an optional configuration option (onDeselectAll). Now the width of the drop-down list is not equal to 100%. Looking at the style in the elements console, it looks like my css should still work:

In the css photo, we can see that .dropdown-menu {width:100% !important} overridden, but I'm not sure what.

Any ideas?

+9
source share
3 answers

The following minimal example works fine, so Bootstrap Multiselect does not override the style. But note that in your case .dropdown-menu and .multiselect-container refer to the same elements ( ul , as in the example below. Therefore, applying style to both classes, like you, is not necessary and can lead to what you see in the inspector.

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript"> $(document).ready(function() { $('#multiselect').multiselect({ buttonWidth: '400px' }); }); </script> <style type="text/css"> .multiselect-container { width: 100% !important; } </style> </head> <body> <select id="multiselect" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> </select> </body> </html>
+13
source

I used the buttonWidth parameter, which .multiselect gives you similar to David Stutz. However, I put '100%' to the right in the parameter.

 <body> <select id="multiselect" multiple="multiple"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <script type="text/javascript"> $(document).ready(function() { $('#multiselect').multiselect({ buttonWidth: '100%' }); //caret is in the middle, switch it to right $(".caret").css('float', 'right'); $(".caret").css('margin', '8px 0'); }); </script> </body>
+12
source

I tried setting buttonWidth and .multiselect-container but it didn’t work for me.

This is my way to set the select tag to 100% in form-group , this might help someone.

 .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width:100%; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" /> <style> .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){ width:100%; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <label for="tags">Select tags list</label> <div class="form-group"> <select class="selectpicker input-large" multiple data-live-search="true"> <option>COAL_5CD-PT07</option> <option>COAL_5CD-PT08</option> <option>COAL_5CD-PT09</option> <option>LNG_TI37130</option> <option>LNG_TI37230</option> <option>CCP_AB1HAD45CP900_ZQ01</option> </select> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script> <script> $(document).ready(function () { $('select').selectpicker(); }); </script> </body> </html>
0
source

More articles:


All Articles