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

hobailey commented 8 months ago

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 (https://github.com/apalfrey/select2-bootstrap-5-theme/pull/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 commented 5 months ago

same issue here, any news?

ozonerik commented 4 months ago

same issues

nicojmb commented 2 months ago

It's project die?

petemarvin commented 1 month ago

You may try this css: https://github.com/apalfrey/select2-bootstrap-5-theme/issues/53#issuecomment-1322289723

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

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selectionrendered .select2-selectionchoice { display: inline-flex; }

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

nicojmb commented 1 month ago

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-selectionrendered .select2-selectionchoice { display: inline-flex; }

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

Perfect, with this code fix it!!

Martin12350 commented 6 days ago

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

apalfrey / select2-bootstrap-5-theme