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: <script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

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.

Multiselect does not work with Bootstrap V4 alpha #741

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions