With a multiple select, the search input isn't actually inline (ie it breaks onto it's own line)

[hobailey]

The issue

When using this theme on a multiple select, the search input is always on it's own line (and never along side/inline the selected values):

The v4 theme doesn't have this issue though (see demo here):

Note that this is separate/different from the issue when using prepends etc (#79).

Code and demo of issue

Here

Expected behaviour

The search input is on the same line/level as the selected values and only goes onto a new line when there is insufficient space

[nicojmb]

same issue here, any news?

[ozonerik]

same issues

[nicojmb]

It's project die?

[petemarvin]

You may try this css: #53 (comment)

.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;
}

[nicojmb]

You may try this css: #53 (comment)

.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; }

Perfect, with this code fix it!!

[Martin12350]

Voting for option in the settings to have search bar on the same line ;)
I also did not like the uneven space on top and bottom because of that margin on child items.

Not modified (suggested) css - notice the space below items

Here is my modification of the previous CSS.

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .3em .65em;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	display: inline-flex;
	margin: .15em 0;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
	display: inline;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice:last-child {
	margin-right: .65em;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
	margin-top: .2em;
}
/* this ugly piece of style here allows us to hide the search bar (empty row) if we have no focus on the select, but still allow tab on it, while preserving the placeholder if no choices are selected */
.select2-container--bootstrap-5:not(.select2-container--focus) .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__choice) + .select2-search {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

Without focus

With focus

This is not perfect, but seems better, at least in my eyes :)