15

I have been using bootstrap multiselect in my web app for about 9 months now. I've been styling the width of the dropdown to be 100% like this:

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

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

I just got the new version because it had an extra configuration option (onDeselectAll). Now the dropdown width is not 100%. Looking at the styling in the elements console it looks like my css should still work:

We can see in the photo of the css that .dropdown-menu {width:100% !important} is being overridden but I'm not sure what by.

Any ideas?

Community
  • 1
  • 1
BeniaminoBaggins
  • 11,202
  • 41
  • 152
  • 287

3 Answers3

25

I used the buttonWidth parameter that .multiselect gives you similar to David Stutz. However, I put the '100%' 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>
Tony L.
  • 17,638
  • 8
  • 69
  • 66
20

The below minimal example is working fine, so Bootstrap Multiselect is not override the styling. But note that in your case .dropdown-menu and .multiselect-container refer to the very same elements (the ul, like in the example below. So applying the styling to both classes, like you did is not necessary and may cause 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>
David Stutz
  • 2,578
  • 1
  • 17
  • 25
  • 1
    I had already got mine working and forgot to answer but your example works too so is a good solution. I needed to add `position: relative` in my specific case: `ul.multiselect-container { width: 100% !important; position: relative !important; }`. Really nice plugin by the way. I have also added selectable optgroups now and it works perfectly. Thanks for your work on it! :) – BeniaminoBaggins Sep 02 '16 at 19:52
  • `buttonWidth: '400px'` and `.multiselect-container { width: 100% !important; }` worked for me – Ashi Oct 11 '20 at 07:49
  • Can it be done using bootstrap-5? that is with pure Javascript. – Dr. Essen May 19 '21 at 15:54
1

I tried setup buttonWidth and .multiselect-container but it did not work for me.

This is my way to set select tag to 100% within form-group class, it may 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>
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62