Select2 open dropdown upward -dropup

Question

I want to show the dropdown list upward each time regardless the enough space below.

How to achieve it? What is the key point to do this?

UPDATE

Here is how I initialize Select2:

$("select[name=ingredients]").select2();

HTML side:

<select name="ingredients" multiple class="populate select2-offscreen form-control" tabindex="-1" style="width: 100%;">
    <optgroup label="Diğer">
        <option value="0">Un</option>
        <option value="1">Şeker</option>
        <option value="2">Tuz</option>
    </optgroup>
</select>

Please take a look at the following answer: https://stackoverflow.com/questions/19983601/prevent-select2-from-flipping-the-dropdown-upward/47912914#47912914 — andreivictor, Dec 20 '17 at 19:16

score 1 · Answer 1 · answered May 20 '16 at 15:00

There's an open select2 issue for this, so currently it doesn't seem to be available as option. If you stick with select2, your options are:

Waiting for the request to be implemented. (Or make a push request yourself - not sure how open the maintainer is to that.)
Adapting the select2.js code yourself, following one of the suggestions in that issue thread. Of course, then you can't upgrade your select2.js anymore without reapplying the patch.
Catching the select2:open event and manipulating the html and css directly. But that would rely so much on the internals of select2, that you might as well go for option 2, since you'll probably break forward compatibility anyway.

Select2 open dropdown upward -dropup

1 Answers1