Multiple select height issue

[xenoborg]

When using a multi select, I can't properly change the height.

.select2-container--default .select2-selection--multiple {
.select2-container .select2-selection--multiple {
min-height: ;
}
doesn't go below its default 32px; when changed to anything lower ie 26px;
changing all margin-top to 0px; and removing all padding from the stylesheet doesn't help. and I use a reset stylesheet.

Not being able to change the height I have to align the selected grey boxes and the input height to vertical align with margin-top, but this always results in extra "padding" on the bottom, adding anything bigger than margin-top: 5px; and the select box gets bigger, meaning the padding still stays.

tldr; min-height does nothing, and centering the crap inside still results in extra "padding-bottom" and the select2.css stylesheet is an unfathomable nightmare.

Would just like a 26px height multi select box, with the selected options being 22 - 24px height and vertical centered.

[korent]

If you want to disable the "extra" height (the 7px) select2 adds when using multi-select option I think this css might do the trick and it won't mess up the style of your dropdown list. Took me a while to figure it out.

.select2-container--open .select2-selection__rendered{
border: none;
}

.select2-container .select2-search--inline{
display: none;
}

[abartier]

The only way I found is to set something like:

.select2-container
  height: 30px
.select2-selection
  height: 30px

But when forcing height when multiple selections are made they get out of the box (the input do not expand anymore).

[leahwchang]

@korent Hi! Your code worked for me but because of display: none, the placeholder text is not showing. I tried to add it to data-placeholder with jQuery, but initiating select2 seems to ignore prior javascript set on the select input... any ideas to show the placeholder text?

[khalyomede]

Can reproduce the issue with this JSFiddle. Do you know if you plan on fixing this issue?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[buttflattery]

up

[Codepwned2]

FOUND CSS SOLUTION:
The issue is with
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px; <!---- THAT GUY
padding: 0;
}
TO FULLY FIX:
.select2-container .select2-selection--multiple {
height: auto!important;
margin: 0;
padding: 0;
line-height:inherit;
border-radius:0;
}
.select2-container .select2-search--inline .select2-search__field {
margin:0;
padding:0;
min-height:0;
}
.select2-container .select2-search--inline {
line-height:inherit;
}

Works in Chrome, Firefox, Safari (latest versions on windows)

[mtngnn]

Codepwned2 has the best answer. It is working like a charm now.

[RoyBellingan]

I think the Codepwned2 answer does not apply any longer.

[JVwork]

So... I've come across this today and the extra 7px are (in my opinion) there to compensate for margin-top (5px) and horizontal borders (1px each) on select2-selection__choice list items.
My solution:

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered li {
    margin: 0;
}

... of course adjust the classes to adapt to your specific case (like .select2-container--default, etc, if needed)
Hope it helps :)

[imskriaz]

I have fixed it with this

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

body .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
margin: 3px;
}

body .select2-container--default .select2-search--inline .select2-search__field {
margin: 0;
max-height: 1em;
padding: calc(1em - 2px);
}

.select2-container {
min-width: 100%;
max-width: 100%;
border: 1px solid #aaa;
border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
border: none;
}