Skip to content
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

Multiselect does not work with Bootstrap V4 alpha #741

Open
mittal-sam opened this issue May 14, 2016 · 16 comments
Open

Multiselect does not work with Bootstrap V4 alpha #741

mittal-sam opened this issue May 14, 2016 · 16 comments
Labels

Comments

@mittal-sam
Copy link

@mittal-sam mittal-sam commented May 14, 2016

I am trying Bootstrap 4 alpha 2 but multiselect does not work with. see fiddle http://jsfiddle.net/TR49m/526/

@aliusa
Copy link

@aliusa aliusa commented May 23, 2016

What doesn't work? Only issue I see is margin/padding of dropdown items

@davidstutz
Copy link
Owner

@davidstutz davidstutz commented Jul 20, 2016

It's on my list.

@Jexah
Copy link

@Jexah Jexah commented Aug 22, 2016

Pretty hyped for this.

@rlidwka
Copy link

@rlidwka rlidwka commented Sep 16, 2016

I've checked it briefly, all seems to work with the following configuration:

  $('select').multiselect({
    buttonClass: 'btn btn-secondary',
    templates: {
      li: '<li><a tabindex="0" class="dropdown-item"><label></label></a></li>',
    }
  });

Basically, there are two changes:

  • buttonClass needs to be btn-secondary instead of btn-default (no harm in using both though)
  • link inside dropdown should have class dropdown-item added
@RoanBrand
Copy link

@RoanBrand RoanBrand commented Apr 13, 2017

I had a problem with the label's left padding in BS4 alpha 6. Used the following:

templates: { li: '<li><a class="dropdown-item" tabindex="0"><label style="padding-left: 10px;width: 100%"></label></a></li>' }

@jhotujec
Copy link

@jhotujec jhotujec commented Oct 11, 2017

For bootstrap-beta, this worked for me:

templates: {li: '<li><a class="dropdown-item" tabindex="0"><label style="display: block;"></label></a></li>'}

@davidstutz
Copy link
Owner

@davidstutz davidstutz commented Oct 23, 2017

Ok, I will probably get back to this as a priority - but do not expect wonders.

@hebeldark
Copy link

@hebeldark hebeldark commented Dec 6, 2017

i'm sorry but i'm not an expert.

i understood the difference between some properties but i don't know how to use the VERSION property or the templates: ...

@thorst
Copy link

@thorst thorst commented Dec 15, 2017

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.

@marcodelpercio
Copy link

@marcodelpercio marcodelpercio commented Mar 7, 2018

Gentlemen,

Months have passed now, and Bootstrap 4 is out now. I was just wondering if this component is finally compatible with BS4?

@Glennmen
Copy link

@Glennmen Glennmen commented Apr 26, 2018

@thorst I used your template to make the multiselect work with bootstrap 4/laravel, thanks for that!
I want to use the optgroup in my multiselect but the alignment is all messed up, any tips?

image

@ccartee
Copy link

@ccartee ccartee commented Jul 20, 2018

@thorst

Appreciate the template; as that seems to have fixed everything for the most part aside from optgroups.

I tried setting the liGroup template, but it seemed to do nothing
liGroup: '<li class="multiselect-item multiselect-group"><a class="dropdown-item" href="javascript:void(0);"><label class="m-0 pl-2 pr-0"><b></b></label></a></li>',

looking at the source... it looks like it ignores the liGroup template

createOptgroup: function(group) {
           var label = $(group).attr("label");
           var value = $(group).attr("value");
           var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>');

Solution may be as simple as editing it so that it is

 createOptgroup: function(group) {
            var label = $(group).attr("label");
            var value = $(group).attr("value");
            var $li = $(this.options.templates.liGroup);

(also aside from it picking up some header menu styles that I probably wrote with too general of css)

JamesRPAS pushed a commit to JamesRPAS/bootstrap-multiselect that referenced this issue Aug 16, 2018
@JamesRPAS
Copy link

@JamesRPAS JamesRPAS commented Aug 16, 2018

Thanks @thorst and @ccartee - those suggestions worked great in my app.

I've added them to PR #1050

@waltersdmh
Copy link

@waltersdmh waltersdmh commented Nov 29, 2018

I've adapted @thorst 's styling to cope with dropdowns containing 100s of options.

Basically just added a max height to that list with a scrollbar. (still abit ugly though)

Sorry for bad styling - i dont know how to use this.

<script type="text/javascript"> $(document).ready(function () { $('#id_selectForms').multiselect({ templates: { li: '<li ><a class="dropdown-item"><label class="m-0 pl-2 pr-0"></label></a></li>', ul: ' <ul style="width:300px; height:200px; overflow-y:scroll;" class="multiselect-container dropdown-menu p-1 m-0" overflow-y:scroll"></ul>', button: '<button type="button" style="width:300px; text-align:left;" 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 multiselect-clear-filter" type="button"><i class="fas fa-minus-circle"></i></button></span>' }, buttonContainer: '<div class="dropdown" />', buttonClass: 'btn btn-outline-secondary' }); }); </script>

chrome_2018-11-29_10-29-15

@tiesont
Copy link

@tiesont tiesont commented Nov 30, 2018

@waltersdmh Use three back-ticks, ```, to start and end a code block. That will render as a pre tag when parsed through GFM. Something like

```
your code here
```
@KevinVerre
Copy link

@KevinVerre KevinVerre commented Jul 31, 2019

A simple workaround I used was to add the caret class to my CSS.

The caret was not appearing in my dropdown buttons because it relies on CSS for a caret class that is in Bootstrap 3 but not Bootstrap 4. To make it compatible, I simply copied that CSS.

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.