How to change the width of the dropdown using Bootstrap Multiselect plugin for jQuery?

Question

I'm using David Sutz's bootstrap multiselect and I can't find a way to modify the .dropdown-menu on onDropdownShow. Setting the width in the function below does not work:

$('#flavor').multiselect({
    onDropdownShow: function(event) {
        $(this).closest('.dropdown-menu').css('width','500px')
    }
});

The problem lays in the $(this) which does not seem to be a DOM node, although I expect it to #flavor.

What I'm trying to do is dynamically change the menu's width depending on the window's width (basically making it responsive), so the code needs to be executed every time the menu is being opened. Additionally I have multiple multiselect boxes on my page, so it really needs to be a generic function without hard coded DOM references, hence the need for $(this) to work.

Project

Do you have any fiddle or something? Also you forgot the semicolon at the end. – Instauration

@Instauration Don't need the semi-colon at the end ;) The problem has been solved and the right answer has been picked. The solution to my problem was replacing $(this) with $(event.currentTarget). – Project

Answer 1

You can use the event to find out which button was clicked. From there you can use simple jQuery traversal to find and edit the dropdown menu.

To have different behaviour based on which dropdown was opened, it is possible to target the id of the original select. Then probably using another function to return any changes required.

$(document).ready(function() {
  $('.dropdowns').multiselect({
    onDropdownShow: function(event) {
      var menu = $(event.currentTarget).find(".dropdown-menu");
      var original = $(event.currentTarget).prev("select").attr("id");
     
      // Custom functions here based on original select id
      if (original === "flavour") menu.css("width", 500);
      if (original === "flavour2") menu.css("background", "red");
      
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<select id="flavour" class="dropdowns" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

<select id="flavour2" class="dropdowns" multiple="multiple">
  <option value="cheese">Cheese</option>
  <option value="tomatoes">Tomatoes</option>
  <option value="mozarella">Mozzarella</option>
  <option value="mushrooms">Mushrooms</option>
  <option value="pepperoni">Pepperoni</option>
  <option value="onions">Onions</option>
</select>

I couldn't find a CDN that hosted the plugin's css so the style will look a little different, but the JS code above works.

Loomis

I have multiple multiselect boxes on one page. I want the menu to be responsive, so upon open I need to dynamically change the menu's width according to the window's width and depending on the position of the multiselect box. So it can't be just some CSS. – Project

The sample code above shows how to target specific multiselects. Can the responsiveness not be controlled by breakpoints and % widths? Are there any specific examples of widths? – Loomis

The multiselects are positioned next to each other in a horizontal row. The first multiselect growing (by checking items within) results in the second multiselect moving to the right, limiting the width of its dropdown. It really only works with a dynamic JavaScript solution. – Project

I have editted the solution so you can have a function targetting each menu depending on the id of the original select. You can change the code to use different attributes to identify the original select. – Loomis

$(event.currentTarget) is what I was looking for, thanks! – Project

Answer 2

I think the way of using closest() should be changed. Try using tag element, instead of class name.

$('#flavor').multiselect({
    onDropdownShow: function(event) {
        $(this).closest('select').css('width','500px')
    }
});

Try this and let me know if this doesn't work.

Civilian

I don't want to change the 'select' element. The 'select' element is actually hidden by the plugin, so it wouldn't have any effect. – Project