Bootstrap-multiselect: Multiselect does not work with Bootstrap V4 alpha

[mittal-sam]

I am trying Bootstrap 4 alpha 2 but multiselect does not work with. see fiddle http://jsfiddle.net/TR49m/526/

[aliusa]

What doesn't work? Only issue I see is margin/padding of dropdown items

[davidstutz]

It's on my list.

[Jexah]

Pretty hyped for this.

[rlidwka]

I've checked it briefly, all seems to work with the following configuration:

  $('select').multiselect({
    buttonClass: 'btn btn-secondary',
    templates: {
      li: '<li><a tabindex="0" class="dropdown-item"><label></label></a></li>',
    }
  });

Basically, there are two changes:

• buttonClass needs to be btn-secondary instead of btn-default (no harm in using both though)
• link inside dropdown should have class dropdown-item added

[RoanBrand]

I had a problem with the label's left padding in BS4 alpha 6. Used the following:

templates: { li: '<li><a class="dropdown-item" tabindex="0"><label style="padding-left: 10px;width: 100%"></label></a></li>' }

[jhotujec]

For bootstrap-beta, this worked for me:

templates: {li: '<li><a class="dropdown-item" tabindex="0"><label style="display: block;"></label></a></li>'}

[davidstutz]

Ok, I will probably get back to this as a priority - but do not expect wonders.

[hebeldark]

i'm sorry but i'm not an expert.

i understood the difference between some properties but i don't know how to use the VERSION property or the templates: ...

[thorst]

So here is my take on bs4 compatibility. I tried to get rid of the ul and li to match the bootstrap documents for dropdown, and I was successful, but this effects the click events so I backed itout and went back to the ul/li.

I had to include font-awsome, because, no icons:

The template below fixes what I perceive to be a bug in BS4 where if there are too many items in list it will make some options go off the top of the screen.

$('select').multiselect({
        templates: {
            li: '<li><a class="dropdown-item"><label class="m-0 pl-2 pr-0"></label></a></li>',
            ul: ' <ul class="multiselect-container dropdown-menu p-1 m-0"></ul>',
            button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown" data-flip="false"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
            filter: '<li class="multiselect-item filter"><div class="input-group m-0"><input class="form-control multiselect-search" type="text"></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-secondary multiselect-clear-filter" type="button"><i class="fas fa-minus-circle"></i></button></span>'
        },
        buttonContainer: '<div class="dropdown" />',
        buttonClass: 'btn btn-secondary'
});

Alternatively you could remove the dependency on font-awsome by using the following:

filterClearBtn: '<span class="input-group-btn"><button type="button" class="btn btn-secondary multiselect-clear-filter">&times;</button></span>'

If you wanted to match bootstraps current syntax/look/feel exactly of dropdowns you would need to add an option of what to monitor and default it to li. Then replace all references to li in the js but thats a pretty invasive change that I don't feel like tackling.

[marcodelpercio]

Gentlemen,

Months have passed now, and Bootstrap 4 is out now. I was just wondering if this component is finally compatible with BS4?

[Glennmen]

@thorst I used your template to make the multiselect work with bootstrap 4/laravel, thanks for that!
I want to use the optgroup in my multiselect but the alignment is all messed up, any tips?

[ccartee]

@thorst

Appreciate the template; as that seems to have fixed everything for the most part aside from optgroups.

I tried setting the liGroup template, but it seemed to do nothing
liGroup: '<li class="multiselect-item multiselect-group"><a class="dropdown-item" href="javascript:void(0);"><label class="m-0 pl-2 pr-0"><b></b></label></a></li>',

looking at the source... it looks like it ignores the liGroup template

```
createOptgroup: function(group) {
var label = $(group).attr("label");
var value = $(group).attr("value");
var $li = $('

');

Solution may be as simple as editing it so that it is 

createOptgroup: function(group) {
var label = $(group).attr("label");
var value = $(group).attr("value");
var $li = $(this.options.templates.liGroup);
```

(also aside from it picking up some header menu styles that I probably wrote with too general of css)

[JamesRPAS]

Thanks @thorst and @ccartee - those suggestions worked great in my app.

I've added them to PR #1050

[waltersdmh]

I've adapted @thorst 's styling to cope with dropdowns containing 100s of options.

Basically just added a max height to that list with a scrollbar. (still abit ugly though)

Sorry for bad styling - i dont know how to use this.

<script type="text/javascript"> $(document).ready(function () { $('#id_selectForms').multiselect({ templates: { li: '<li ><a class="dropdown-item"><label class="m-0 pl-2 pr-0"></label></a></li>', ul: ' <ul style="width:300px; height:200px; overflow-y:scroll;" class="multiselect-container dropdown-menu p-1 m-0" overflow-y:scroll"></ul>', button: '<button type="button" style="width:300px; text-align:left;" class="multiselect dropdown-toggle" data-toggle="dropdown" data-flip="false"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>', filter: '<li class="multiselect-item filter" ><div class="input-group m-0"><input class="form-control multiselect-search" type="text"></div></li>', filterClearBtn: '<span class="input-group-btn"><button class="btn multiselect-clear-filter" type="button"><i class="fas fa-minus-circle"></i></button></span>' }, buttonContainer: '<div class="dropdown" />', buttonClass: 'btn btn-outline-secondary' }); }); </script>

[tiesont]

@waltersdmh Use three back-ticks, ```, to start and end a code block. That will render as a pre tag when parsed through GFM. Something like

your code here

[KevinVerre]

A simple workaround I used was to add the caret class to my CSS.

The caret was not appearing in my dropdown buttons because it relies on CSS for a caret class that is in Bootstrap 3 but not Bootstrap 4. To make it compatible, I simply copied that CSS.

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}