Bootstrap-multiselect: Bootstrap 4 compatibility

[slolo2000]

Hello,

Is there any chance to update this really good component to support bootstrap 4?

Thanks in advance to the author and have a nice day.

[tiesont]

See #963 and #741 - probably not happening immediately.

[NikoBeliko]

Any Idea when this will be updated? Bootstrap 4 has been out for a while now. If someone is looking for a proper alternative to this type of control that is ACTUALLY bootstrap 4 compatible there is sumo select. Here is the link, http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html. Looks like people have been asking for this to be bootstrap 4 compatible since the v4 beta was out in 2016. I wouldn't suspect anything to change anytime soon.

[djibe]

Bootstrap Select does the same and IS COMPATIBLE WITH BS4, see it here : http://jsfiddle.net/djibe89/403fn7cu/
The same Bootstrap Select for Bootstrap 4 and a lovely material design theme by me : http://jsfiddle.net/djibe89/yvbts5e9/ (huge enhencements incoming)

[djibe]

However, it seems BMS is working with BS4 as MDB uses it : http://jsfiddle.net/djibe89/yvbts5e9/

[mohe2015]

https://github.com/davidstutz/bootstrap-multiselect/issues/741 has some ideas which may work.

[ccartee]

I have issues in bootstrap 4 with the menu kind of jumping all over the place. Not just because the size of the widget changes (and hence the width of the drop down list, which changes the wrapped text) but also issues with the drop down list not being anywhere close to the position it should be.

It's also always opening up rather than depending on screen space available.

I really like the widget; if I can find some quick fixes, I'd love to keep using it as I transition from bootstrap 3 to 4.

[zoigecyb]

I have no problems with functionality. Only with styles. But i think styles can be fixed in a short time

[ankita199]

any updates on this?

[v-asdhin]

Keyboard Tab functionality is not working, it's not hiding the dropdown. The reason is that Multiselect uses "open" CSS class to hide dropdown as it is targeting Bootstrap 3.3. However, Bootstrap 4 changes this by using "show" CSS class.

(Try using Chrome event tracing for mouse "click" to debug)

[adeeb1]

I just submitted https://github.com/davidstutz/bootstrap-multiselect/pull/1107 with what I believe is pretty good Bootstrap 4 support. If you'd like to use it in your project now, you can download the files in the dist directory in my fork: https://github.com/adeeb1/bootstrap-multiselect

[eved42]

In Bootstrap 4.3, dropdowns don't use ul and li anymore but div and a.

I tried to replace the templates but there were a lot of issues. Here is a way to make it work with Bootstrap 4.3.

<select id="example" name="example" multiple>
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
</select>

$('#example').multiselect({
    buttonClass: 'btn btn-outline-dark',
    buttonContainer : '<div class="dropdown" />',
    templates: {
      li: '<li class="dropdown-item"><a><label class="m-0 pl-2 pr-0"></label></a></li>',
      ul: '<ul class="multiselect-container dropdown-menu p-1 m-0"></ul>'
    }
});