davidstutz
Bootstrap multiselect dropdown not opening in Bootstrap v5
Try this
$(".multi-select").multiselect({
// Bootstrap 5 compatibility
templates: {
button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
},
});
Try this
<script type="text/javascript">
$(document).ready(function () {
$("#multiple-checkboxes").multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
},
});
});
</script>
I tried the same @andyg2 still not working, the class open is not coming at .btn-group div. The issue is that, Do you know some way we can add that class manually? I am a designer and finding it difficult to add the class on run time created div.
finding it difficult to add the class on run time created div
The only classes that change on the button is "show"
closed multiselect dropdown-toggle btn btn-primary btn-default
opened multiselect dropdown-toggle btn btn-primary btn-default show
Maybe you could edit this pen to demonstrate the issue.
https://codepen.io/andyg2/pen/ZEvNMzw
@andyg2 Hi, checkout this codepen [https://codepen.io/manisingh_24/pen/popXRmV] It shows exactly the problem I am facing with multi select.
https://codepen.io/manisingh_24/pen/popXRmV
I've edited your codepen to add the bootstrap compatibility - it's working
https://codepen.io/andyg2/pen/rNpEyaP
I am using all cdn provided by you and script code which you have provided. @andyg2
I am using all cdn provided by you and script code which you have provided. @andyg2
<select id="multiple-checkboxes"> is not in your screenshots.
You're running multi-select on document ready, document ready happens only once when the page first loads. Perhaps the #multiple-checkboxes ID does not exist when document ready occurs.
I recommend creating a code pen which does demonstrate the problem.
This problem occurs since bs5 has changed all bootstrap "data-" attributes to "data-bs-".
You can fix this directly in the js (also in the minified version if you like). Just search for the expression data-toggle="dropdown" and simply add data-bs-toggle="dropdown" inside the button tag.
By adding this you can use it with both bootstrap 4 and 5.
If you don't need compatibility with bs4 and only want to use it with bootstrap 5 you can alternatively just replace data-toggle="dropdown" with the data-bs-toggle="dropdown" instead of adding it.
Note: This solution does not fix the ugly system button-style that occurs with bs5!
To fix the ugly system button style you need to also add "form-select" to the tag <button type="button" class="multiselect dropdown-toggle" ... in the js-code.
Full example with both changes:
Before change:
<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown">
Afterwards:
<button type="button" class="form-select multiselect dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown">
Are there any plans to support bootstrap5?
It works with a template directive
Vanilla
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.getElementById('multiple-checkboxes');
$(checkboxes).multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
}
});
});
jQuery
$(document).ready(function () {
$("#multiple-checkboxes").multiselect({
templates: {
button: '<button type="button" class="multiselect dropdown-toggle btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>',
},
});
});