web-dev-qa-db-ja.com

select2のドロップダウンメニューを右揃え

標準の左揃えではなく、select2でdropdownAutoWidth: trueを使用してドロップダウンメニューを右揃えにする方法はありますか？選択をそのままにしたいのですが、ドロップダウンを左に移動して、右側の選択と揃えます。間違った配置で以下のスニペットを参照してください...

注：図のように、選択とドロップダウンのサイズを変えたいのですが。

編集// direction: rtl; text-align: right;を追加する提案で更新されました。これは、テキストを右揃えするだけです。ドロップダウン全体を、その上の選択したオプションに合わせて右揃えにします。例えば。ドロップダウンは、選択したオプションの右側ではなく、左側に突き出ているはずです。

編集2 // .select2-dropdown { left: -69px !important; }で更新これにより、希望どおりの外観になりますが、-69pxの固定値を設定する必要がない方法はありますか？

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});
.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

私はそれをこのように見せたいですが、それを達成するための固定値ではありません。

enter image description here

javascriptjqueryhtmlcssjquery-select2
5
SeaBass

選択とドロップダウンのサイズを変えたいので、これが私の解決策ですselect2組み込みオプションといくつかのCSSを使用ですが、完全ではないかもしれません。

rtlを作成するのは簡単です。dirを使用するだけですが、以下に示すように、他のオプションを渡す必要があります。

$('select').select2({
    dir: "rtl",
    dropdownAutoWidth: true,
    dropdownParent: $('#parent')
});

ここでの鍵はdropdownParentです。また、次のようにHTMLを編集する必要があります。

<div id='parent'>
    <select>
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
</div>

そして最後に、いくつかのCSSが必要です。

#parent {
  /* can be any value */
  width: 300px;
  text-align: right;
  direction: rtl;
  position: relative;
}
#parent .select2-container--open + .select2-container--open {
  left: auto;
  right: 0;
  width: 100%;
}

あなたはそれを実際に見ることができます ここcodepenで

複数の選択肢がある場合は、dropdownParentオプションを処理するためのJSコードが必要です。ところであなたはdropdownAutoWidthオプションを削除すればあなたの人生はより簡単になります;）

2
Mehdi Dehghani

それでも別の方法を探している場合。私も最近これを達成する必要があり、RTLの回答は私のプロジェクトにとって実行可能なソリューションではありませんでした。 select2.js（4.0.6）を使用していて、スクリプトを変更しても構わない場合は、次のコードを置き換えて、ターゲット要素にクラスを追加することで正しい配置を実現できます。

行4381から4384を探します。

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

以下に置き換え

var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));

if (this.$element.hasClass("right-align")) {
    var css = {
        right: right,
        top: container.bottom
    };
} else {
    var css = {
        left: offset.left,
        top: container.bottom
    };
}

クラスをターゲットの選択入力に右揃えで追加します。

<select id="client_select" class="form-control right-align">
     <option value="01">Example One</option>
     <option value="02">Example Two</option>
     <option value="03">Example Three</option>
</select>

それで十分です。ターゲット要素にクラスがある場合、コードは、左配置ではなく右配置を使用してドロップダウンを配置します。コンテナが親に設定されている場合も同様に機能するはずです。ただし、これは完全にテストされていません。洗練されたソリューションではないかもしれませんが、CSSで何もオーバーライドする必要はありません。右揃えのドロップダウンを処理するためのオプションを追加する更新が行われるまで、トリックを行う必要があります。それが役に立てば幸い。

0
RyDog

init select with dir： "rtl" such as：

$('select').select2({
   dir: "rtl,
   ...
   ...
   ...
   ...
   })
0
Omid Ahmadyani