New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bootstrap multiselect dropdown not opening in Bootstrap v5 #1230
Comments
other simple dropdown are working but multiselect is not opening |
Try this
|
<script type="text/javascript">
$(document).ready(function () {
// $('#multiple-checkboxes').multiselect('enable');
$("#multiple-checkboxes").multiselect({
templates: {
button: '',
},
});
});
</script>
I am having this code it is not working @andyg2 |
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. |
The only classes that change on the button is "show" closed Maybe you could edit this pen to demonstrate the issue. |
@andyg2 Hi, checkout this codepen [https://codepen.io/manisingh_24/pen/popXRmV] |
I've edited your codepen to add the bootstrap compatibility - it's working |
I am using all cdn provided by you and script code which you have provided. @andyg2 |
|
This problem occurs since bs5 has changed all bootstrap "data-" attributes to "data-bs-". If you don't need compatibility with bs4 and only want to use it with bootstrap 5 you can alternatively just replace Note: To fix the ugly system button style you need to also add "form-select" to the tag Full example with both changes: Afterwards: |
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>',
},
});
}); |
I am using bootstrap v5 but dropdown is not opening.
The text was updated successfully, but these errors were encountered: