Force showing dropdown-container always above or below

As far as I know, there's no option which cover this.
Since it can't be just achieved via css customization, the only way is to intercept the opening of the select and the reposition the dropdown-container manually, but It's definitely not the best solution.
Any chance to see it in the upcoming v4.x?

I would also be interested by this feature !

I did this in Select2 3.5.2 to force the container to start above instead of below the search box.

In select2.js you search for "positionDropdown: function() {" and change to "positionDropdown: function(forceAbove) {"

In the same function, after the var settings, paste this code:

forceAbove = typeof forceAbove !== 'undefined' ? forceAbove : false;
if (forceAbove) {
    enoughRoomAbove = true;
    enoughRoomBelow = false;
}

After that, to force your select2 to show above, use this

.on("select2-open", function() { 
    $(this).select2('positionDropdown', true);
});

There is a simpler way to implement a "forceabove" param:

In select2.js search for "positionDropdown: function()";
at the var settings change
aboveNow = $dropdown.hasClass("select2-drop-above")
to
aboveNow = this.opts.forceabove || $dropdown.hasClass("select2-drop-above")
Now you can setup select2 with option
forceabove = true

Same question

I was considering switching from Chosen to Select2, but I was surprised to see that this was something you couldn't control, and worse, it would be inconsistent: depending on the contents of the dropdown, it alternates between above and below.

fix : issues select2#3121 & select2#3354 - adding options for dropdow…

fix : select2#3121 - adding options for dropdown positionning

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.

It looks like making the bottom value auto forcefully in CSS can also do the trick. I used the following code and it is kind of working for me fine.
.my_select_picker_trigger.dropup .dropdown-menu { bottom: auto !important; }

@apaulo

following @apaulo solution...

There is a simpler way to implement a "forceabove" param:

1. In select2.js search for "positionDropdown: function()";

2. at the var settings change
   `aboveNow = $dropdown.hasClass("select2-drop-above")`
   to
   `aboveNow = this.opts.forceabove || $dropdown.hasClass("select2-drop-above")`

3. Now you can setup select2 with option
   `forceabove = true`

in the latest version, you want to use

this.options.get('forceabove')

my site proper working but 2-3days Iface issue that is select2 dropdown I want open dropdown below or above

Navigation Menu

Repository navigation

Force showing dropdown-container always above or below #3121

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Force showing dropdown-container always above or below #3121

Description

Activity

mh-nichts commented on May 13, 2015

leonardomdr commented on Aug 21, 2015

apaulo commented on Dec 31, 2015

ganholete commented on Jan 8, 2016

tirdadc commented on Jan 27, 2016

stale commented on Mar 13, 2019

stale commented on May 18, 2019

hassanrazmy commented on Jan 18, 2021

aurovrata commented on Sep 13, 2021

mehulvardiya commented on Sep 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions