javascriptjquerycssjquery-select2select2-rails

Prevent select2 from flipping the dropdown upward


As per title, is there a way to force select2 to always create a dropdown instead of a drop-up?

There also appears to be some javascript that is either causing the flip when you scroll above the dropdown, adding a new CSS class "select2-drop-above", or both.

EDIT: I should've specified that I'm pulling the library in via select2-rails. I'm hoping there is a way around this that doesn't involve pulling the whole select2 lib in myself and editing the select2.js file directly.


Solution

  • Modifying the plugin is not preferred as you mention. I had a similar issue and couldn't find an way to use select2 options to force the dropdown to stay below. The solution I ended up with is the following:

    $("#mySelect2").select2({ ...options... })
        .on('select2-open', function() {
    
            // however much room you determine you need to prevent jumping
            var requireHeight = 600;
            var viewportBottom = $(window).scrollTop() + $(window).height();
    
            // figure out if we need to make changes
            if (viewportBottom < requireHeight) 
            {           
                // determine how much padding we should add (via marginBottom)
                var marginBottom = requireHeight - viewportBottom;
    
                // adding padding so we can scroll down
                $(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");
    
                // animate to just above the select2, now with plenty of room below
                $('html, body').animate({
                    scrollTop: $("#mySelect2").offset().top - 10
                }, 1000);
            }
        });
    

    This code determines if there is enough room to place the dropdown at the bottom and if not, creates it by adding margin-bottom to some element on the page. It then scrolls to just above the select2 so that the dropdown won't flip.