web-dev-qa-db-ja.com

select2がドロップダウンを上に反転しないようにする

タイトルごとに、select2がドロップアップではなく常にドロップダウンを作成するように強制する方法はありますか？

また、ドロップダウンの上でスクロールしたときにフリップが発生するか、新しいCSSクラス「select2-drop-above」が追加されるか、またはその両方が発生しているJavaScriptがあるようです。

編集：select2-Railsを介してライブラリをプルしていることを指定する必要がありました。これを回避する方法があり、select2 lib全体を自分でプルし、select2.jsファイルを直接編集する必要はありません。

javascriptjquerycssjquery-select2select2-rails
22
kjb

あなたが言うようにプラグインを変更することは好ましくありません。同様の問題があり、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の真上までスクロールして、ドロップダウンが反転しないようにします。

3
shanabus

単に編集できますselect2.js


どこに書いてあるか

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

変更するだけです

enoughRoomBelow = true,
enoughRoomAbove = false,
27
kei

ソースコードを変更することはオプションではなく、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

[〜＃〜]更新[〜＃〜]2019年12月30日

最新のSelect2バージョンでフィドル（v4.0.12）： https://jsfiddle.net/g4maj9ox/

20
andreivictor

次のようにCSSを上書きすることでそれを行うことができます：

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

私はそのためのより簡単/高速な解決策を見つけていました：

        $("select").select2({

            // Options

        }).on('select2:open',function(){

            $('.select2-dropdown--above').attr('id','fix');
            $('#fix').removeClass('select2-dropdown--above');
            $('#fix').addClass('select2-dropdown--below');

        });

簡単です。。select2-dropdown--aboveを。select2-dropdown--belowopeningイベント（select2：open）.

これはイベントの下でのみ機能し、selectが開かれたときにクラスを変更するだけで実行できる方法は他にもたくさんあります。

ps。 jqueryを使用してselectにデータを入力しようとしても機能しません。

4
user4542733

[シャナバス]回答から更新

jQuery("#line_item").select2({
            formatResult: Invoice.formatLineItem
        })
        .on('select2-open', function() {
            // however much room you determine you need to prevent jumping
            var requireHeight = $("#select2-drop").height()+10;
            var viewportBottom = $(window).height() - $("#line_item").offset().top;

            // 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: $("#select2-drop").offset().top - 10
                }, 1000);
            }
        });
2
aWebDeveloper
.select2-dropdown--above { bottom: auto !important; }
0
Tiberiu Raducea