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 · 13 comments

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@aliusa

aliusa May 23, 2016

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

aliusa commented May 23, 2016

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

@davidstutz

This comment has been minimized.

Show comment
Hide comment
@davidstutz

davidstutz Jul 20, 2016

Owner

It's on my list.

Owner

davidstutz commented Jul 20, 2016

It's on my list.

@Jexah

This comment has been minimized.

Show comment
Hide comment
@Jexah

Jexah Aug 22, 2016

Pretty hyped for this.

Jexah commented Aug 22, 2016

Pretty hyped for this.

@rlidwka

This comment has been minimized.

Show comment
Hide comment
@rlidwka

rlidwka 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

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

This comment has been minimized.

Show comment
Hide comment
@RoanBrand

RoanBrand 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>' }

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

This comment has been minimized.

Show comment
Hide comment
@jhotujec

jhotujec 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>'}

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

This comment has been minimized.

Show comment
Hide comment
@davidstutz

davidstutz Oct 23, 2017

Owner

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

Owner

davidstutz commented Oct 23, 2017

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

@hebeldark

This comment has been minimized.

Show comment
Hide comment
@hebeldark

hebeldark 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: ...

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

This comment has been minimized.

Show comment
Hide comment
@thorst

thorst 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.

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

This comment has been minimized.

Show comment
Hide comment
@marcodelpercio

marcodelpercio 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?

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

This comment has been minimized.

Show comment
Hide comment
@Glennmen

Glennmen 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

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

This comment has been minimized.

Show comment
Hide comment
@ccartee

ccartee 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)

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

This comment has been minimized.

Show comment
Hide comment
@JamesRPAS

JamesRPAS Aug 16, 2018

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

I've added them to PR #1050

JamesRPAS commented Aug 16, 2018

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

I've added them to PR #1050

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment