防止select2向下翻转下拉列表

Question

根据标题,是否有办法强制select2始终创建下拉列表而不是下拉？

当你在下拉列表上方滚动,添加新的CSS类"select2-drop-above"或两者兼而有之时,似乎还有一些javascript导致翻转.

编辑:我应该指定我通过select2-rails拉动库.我希望有一种解决方法,不涉及在我自己拉动整个select2 lib并直接编辑select2.js文件.

Answer 1

您可以编辑select2.js


它所说的位置

enoughRoomBelow = dropTop + dropHeight <= viewportBottom,
enoughRoomAbove = (offset.top - dropHeight) >= this.body().scrollTop(),

只需将其更改为

enoughRoomBelow = true,
enoughRoomAbove = false,

Answer 2

由于修改源代码不是一个选项,并且为select2:open事件添加一个钩子不是很优雅,特别是当你在同一个页面中有多个select2实例时,我已经为Select2插件编写了一个小扩展.

我的实现受到来自插件存储库(https://github.com/select2/select2/pull/4618)的PR的启发,该存储库尚未合并.

基本上,以下代码会覆盖处理下拉列表定位的原始插件函数,并添加一个新选项(dropdownPosition)以强制下拉/下方定位下拉列表.

新dropdownPosition选项可以采用以下值: - below- 下拉列表始终显示在输入的底部; - above- 下拉列表始终显示在输入的顶部; - auto(默认) - 它使用旧的行为.

只需在select2.js文件后插入以下代码:

(function($) {

  var Defaults = $.fn.select2.amd.require('select2/defaults');

  $.extend(Defaults.defaults, {
    dropdownPosition: 'auto'
  });

  var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');

  var _positionDropdown = AttachBody.prototype._positionDropdown;

  AttachBody.prototype._positionDropdown = function() {

    var $window = $(window);

    var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above');
    var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below');

    var newDirection = null;

    var offset = this.$container.offset();

    offset.bottom = offset.top + this.$container.outerHeight(false);

    var container = {
        height: this.$container.outerHeight(false)
    };

    container.top = offset.top;
    container.bottom = offset.top + container.height;

    var dropdown = {
      height: this.$dropdown.outerHeight(false)
    };

    var viewport = {
      top: $window.scrollTop(),
      bottom: $window.scrollTop() + $window.height()
    };

    var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
    var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);

    var css = {
      left: offset.left,
      top: container.bottom
    };

    // Determine what the parent element is to use for calciulating the offset
    var $offsetParent = this.$dropdownParent;

    // For statically positoned elements, we need to get the element
    // that is determining the offset
    if ($offsetParent.css('position') === 'static') {
      $offsetParent = $offsetParent.offsetParent();
    }

    var parentOffset = $offsetParent.offset();

    css.top -= parentOffset.top
    css.left -= parentOffset.left;

    var dropdownPositionOption = this.options.get('dropdownPosition');

    if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') {
      newDirection = dropdownPositionOption;
    } else {

      if (!isCurrentlyAbove && !isCurrentlyBelow) {
        newDirection = 'below';
      }

      if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) {
        newDirection = 'above';
      } else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) {
        newDirection = 'below';
      }

    }

    if (newDirection == 'above' ||
    (isCurrentlyAbove && newDirection !== 'below')) {
        css.top = container.top - parentOffset.top - dropdown.height;
    }

    if (newDirection != null) {
      this.$dropdown
        .removeClass('select2-dropdown--below select2-dropdown--above')
        .addClass('select2-dropdown--' + newDirection);
      this.$container
        .removeClass('select2-container--below select2-container--above')
        .addClass('select2-container--' + newDirection);
    }

    this.$dropdownContainer.css(css);

  };

})(window.jQuery);

初始化插件的方法如下:

$(document).ready(function() {
  $(".select-el").select2({
    dropdownPosition: 'below'
  });
});

在这里小提琴:https: //jsfiddle.net/byxj73ov/

Github存储库:https: //github.com/andreivictor/select2-dropdownPosition

Answer 3

您可以通过覆盖CSS来实现:

.select-dropdown {
  position: static;
}
.select-dropdown .select-dropdown--above {
      margin-top: 336px;
}

Answer 4

正如您提到的，修改插件不是首选。我遇到了类似的问题，无法找到一种方法来使用select2选项来强制下拉菜单保持在下方。我最终得到的解决方案如下：

$("#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);
        }
    });

此代码确定是否有足够的空间将下拉菜单放置在底部，如果没有，则通过向页面上的某些元素添加 margin-bottom 来创建下拉菜单。然后它滚动到 select2 的正上方，这样下拉列表就不会翻转。