Multiple select and/with input group

[wselen]

Using multiple select the input box is too high compared to others because the search inline is on the next line.
Would be nice if this would work like bootstrap 3, inline next too tags.

With these adjustment I could fix it for now :

// fix: input-group

       .input-group > .select2-container--bootstrap-5 {
            width: auto !important;
        }

// fix: multiple select
.select2-selection--multiple {
padding: 0 !important;
}
.select2-selection--multiple > ul {
display: inline-flex !important;
}
.select2-selection--multiple > ul > li {
padding: 0 0.3rem !important;
margin: 0.3rem !important;
}
.select2-selection--multiple .select2-search--inline {
display: inline-flex !important;
width: auto !important;
margin-top: 0.3rem !important;
vertical-align: middle;
}

[hdogan]

It works but it also cuts placeholder text and removes placeholder padding...

[apalfrey]

It works but it also cuts placeholder text and removes placeholder padding...

This is exactly why I made the decision to have the fields on a separate line to the tags. It caused a lot of issues and was simpler, more effective and didn't break the layout as much having it on a separate line.

I'll keep this open to see what people think but I'm inclined to keep the field on a separate line to the tags

[ceab254]

This fix with jQuery still solves the problem with the placeholder.

CSS

/*fix: multiple select*/
.select2-selection--multiple {
    padding: 0rem 0.75rem !important;
}
.select2-selection--multiple > ul {
    display: inline-flex !important;
}
.select2-selection--multiple > ul > li {
    padding: 0 0.3rem !important;
    margin: 0.3rem !important;
}
.select2-selection--multiple .select2-search--inline {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 0.3rem !important;
    vertical-align: middle;
}

JavaScript / jQuery

$('select[multiple]').on('select2:select select2:unselect change', function () {
    $(this).next().find('.select2-selection--multiple')
        .attr('style', ('padding: ' + ($(this).val().length ? 0 : '0rem 0.75rem') + '!important'));
});

Thanks for your help guys 👍

[berndy2001]

Hello to all,

I am here because I noticed the extra line and to be honest I find it unnecessary. I do not use placeholders.

@wselen and @ceab254's workaround works fine as long as you only use one line.

With two lines, unfortunately not. But thanks anyway.

Update:
I don't know if this is the proper way to do it, but I got rid of the blank line.

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: inline;
}
	   
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: inline-flex;
}
	   
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
    display: inline;
}

[GHPS]

Thanks to everyone contributing to this helpful discussion.
Since I'm late to the topic, let me give a short summary
from my perspective.

The new default layout has two rows - one for the currently
selected items and one for the user input. There are good
reasons to have this layout but some people - like me -
prefer a tighter style which was the default with bootstrap
4.

Two alternatives have been developed by the participants
in this discussion. I've tried both of them with different
results - here are my finding, yours may vary.

The patch by @berndy2001 involves just a few lines of css
styling and is therefore simpler than second approach
which is a plus. The idea is to make the input line -
invisible which works fairly well. In my case the input
cursor as well as the input characters are still visible
although behind the drop menu. After closing the menu the
cursor remains blinking in an empty space of the web page.
A bit confusing is when the partial, hidden input leads
to no match in the list.

The patch by @wselen, improved by @ceab254, is a combination
of css styling and js code. It removes the second row by
putting the input in the same row as the selected items.
For me this works perfectly. The cursor and partial input
are placed in the correct spot. When the line gets filled
up by selected items, a second (or third line) is added
as expected. The only caveat is that the placeholder text
is truncated to 6 characters. In my case that is less of
a problem since I use floating labels. Here the label
is always in a raised, floated state but that is not an
annoyance to me.

@apalfrey : Working with the integrated items/input row feels
very natural - this could be an option in the main branch
of the repo.

[billortell]

Thanks to everyone contributing to this helpful discussion. Since I'm late to the topic, let me give a short summary from my perspective.

The new default layout has two rows - one for the currently selected items and one for the user input. There are good reasons to have this layout but some people - like me - prefer a tighter style which was the default with bootstrap 4.

Two alternatives have been developed by the participants in this discussion. I've tried both of them with different results - here are my finding, yours may vary.

The patch by @berndy2001 involves just a few lines of css styling and is therefore simpler than second approach which is a plus. The idea is to make the input line - invisible which works fairly well. In my case the input cursor as well as the input characters are still visible although behind the drop menu. After closing the menu the cursor remains blinking in an empty space of the web page. A bit confusing is when the partial, hidden input leads to no match in the list.

The patch by @wselen, improved by @ceab254, is a combination of css styling and js code. It removes the second row by putting the input in the same row as the selected items. For me this works perfectly. The cursor and partial input are placed in the correct spot. When the line gets filled up by selected items, a second (or third line) is added as expected. The only caveat is that the placeholder text is truncated to 6 characters. In my case that is less of a problem since I use floating labels. Here the label is always in a raised, floated state but that is not an annoyance to me.

@apalfrey : Working with the integrated items/input row feels very natural - this could be an option in the main branch of the repo.

I implemented solution from @ceab254 and @wselen and it worked perfectly, thanks for the summary and thank you @ceab254 and @wselen for the astounding work.