search

davidstutz / bootstrap-multiselect

JQuery multiselect plugin based on Twitter Bootstrap.
https://davidstutz.github.io/bootstrap-multiselect/
Other
3.68k stars 1.98k forks source link

It doesnt work with Bootstrap 5 #1226

Closed htdung83 closed 2 years ago

htdung83 commented 2 years ago

I am using Bootstrap 5.1.3 and try to install this plugin but it seems not to work with Bootstrap 5. The screen showed none selected unstyled button only. The list, even, doesn't show on clicking event. unstyled-button .

tiesont commented 2 years ago

Correct - Bootstrap 5 is not currently supported. You can use this library with Bootstrap 3 or Bootstrap 4.

jalley64 commented 2 years ago

Any plans on supporting 5?

PawelPatyk commented 2 years ago

It should help:

$('#custom-select').multiselect({
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>'
    },
});
htdung83 commented 2 years ago

It should help:

$('#custom-select').multiselect({
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>'
    },
});

It should help:

$('#custom-select').multiselect({
    templates: {
        button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>'
    },
});

Thankss a lot

gh-at-sqh commented 2 years ago

$.fn.multiselect.Constructor.prototype.defaults.templates.button = '<button type="button" class="multiselect dropdown-toggle form-control" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'

NorbertHanni commented 2 years ago

text-left --> text-start and text-right --> text.end $.fn.multiselect.Constructor.prototype.defaults.buildButton
if (this.options.buttonTextAlignment) { switch (this.options.buttonTextAlignment) { case 'left': this.$button.addClass('text-start'); break; case 'center': this.$button.addClass('text-center'); break; case 'right': this.$button.addClass('text-end'); break; } }

davidstutz commented 2 years ago

Closing with reference to #1189.

markusd1984 commented 2 years ago

Correct - Bootstrap 5 is not currently supported. You can use this library with Bootstrap 3 or Bootstrap 4.

Thanks, that explains why I didn't get any dropdown, was hard to figure out with the lack of mention in the guide and no errors in the console, this should be mentioned in the guide and ideally an error in the console. =)

Also popper.js is required for dropdowns, neither any mentions in getting started as far I saw.