设置select2的高度

Question

How to increase the height of the select2 suggestion dropdown?

I tried the idea proposed at https://github.com/select2/select2/issues/144 :

.select2-results {
  max-height: 500px;
}

However, that does not work. If I instead set the min-height property, the size is increased, however, I do not want to have a 500px huge dropdown if there are only 1 or 2 items...so min-height is not really an option.

I want the dropdown to dynamically adjust its height to the content, but increase its height up to 500px before a scrollbar is displayed.

Answer 1

Try to use:

.select2-results__options {
   max-height: 500px;
}

If that doesn't work try to add !important so it overwrite it's default max-height (try both methods, yours and mine).

Answer 2

I think you need to set both the .select2-drop and .select2-results classes as follows:

.select2-drop {
    max-height: /* Your value here */;
    overflow: scroll;
}

.select2-results {
    max-height: 100%;
}

This ensures that the results are not limited in height and that the dropdown is still usable. If you test it you should see that it works for variable list lengths no matter how you set the max-height on .select2-drop . Shorter lists should fit content and long lists should scroll within that limit.

Answer 3

None of the answers above worked for me, but this did. I'm putting it here for future reference on google :

.select2-container--default .select2-results > .select2-results__options {
    max-height: 400px;
    min-height: 400px;
    overflow-y: auto;
}