Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

select2 - Always dropdown and not dropup

How to force select2 to always dropdown and never dropup?

I tried this solution but it's not working: This doesn't work

$("#e1").select2()
.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: $("#e1").offset().top - 10
            }, 1000);
        }
    });

jsFiddle

like image 883
brunodd Avatar asked Sep 01 '15 09:09

brunodd


People also ask

How do I stop select2 from auto selecting the first option?

This behaviour exists not because Select2 is forcing it, but because the browser is auto-selecting the first option for you. We can't control that, we can only work around it. Your best option is to use the placeholder support in Select2 and include a blank option tag as your default selection.

How do I create a select2 dynamically?

HTML. Create a <select class="select2_el" > element to initialize select2 on page load and create <div id="elements" > container to store <select > element on button click using jQuery AJAX.

Why select2 is not working in modal?

Select2 does not function properly when I use it inside a Bootstrap modal. This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the <body> element, it is considered "outside of the modal".

How do I hide select2 search box?

Hiding the search box For single selects, Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.


1 Answers

This worked for me:

$.fn.select2.amd.require([
  'select2/selection/multiple',
  'select2/selection/search',
  'select2/dropdown',
  'select2/dropdown/attachContainer',
  'select2/dropdown/closeOnSelect',
  'select2/utils'
], function (MultipleSelection, Search, Dropdown, AttachContainer, CloseOnSelect, Utils) {
  var SelectionAdapter = Utils.Decorate(
    MultipleSelection,
    Search
  );

  var DropdownAdapter = Utils.Decorate(
    Utils.Decorate(
      Dropdown,
      CloseOnSelect
    ),
    AttachContainer
  );

  $('#e1').select2({
    dropdownAdapter: DropdownAdapter
  });
});

jsFiddle

like image 163
brunodd Avatar answered Nov 29 '22 14:11

brunodd