ブートストラップ - データコンテナ使用時に置き忘れリストを選択する

Question

ブートストラップ選択ライブラリを使用してhtmlを選択しました。 data-containerを定義してもリストは正常に機能しますが、重複の問題があります。基本的には、overflow-y: auto;を持っている必要があるコンテナ内でselect（data-containerなし）をレンダリングしています。選択がNavbar（メインメニュー）の上で開こうとすると、重なり合って切り取られます。 JSFiddle hereを参照してください（ドロップダウンを強制的にドロップUPとして開く必要があります）。

私のための適切な解決策は、私はdata-containerを定義すると思います。しかし、私がこれを行うとすぐに、リストは間違って配置されます。 JSFiddle hereを参照してください（ドロップダウンを開くのではなく、強制的に開く必要があります）。

もう1つの推奨される回避策は、前の例のように自分のコンテナdivの代わりにdata-container="body"を設定することでした。このDIDは最初のシナリオを解決しますが、それ以外の場合は中断します。 this JSFiddleを参照して、 "State"というリストをドロップダウンしてください（下に表示されるように）。ドロップダウンボタンの間に大きな空白を入れてリストが間違って配置されていることがわかります。

私がリストをレンダリングするすべての場所に対して調整する必要がある解決策ではなく、どこにでも同じソリューションを適用することができます。

事前のおかげで、

Answer 1

これはbootstrap-selectのマスターブランチで修正されており、正式にv1.11.0で利用可能になります。 https://github.com/silviomoreto/bootstrap-select/commit/f2358a15e7b3cdba519a22ada9b7654ab6775255を参照してください。

Answer 2

引き続き議論から：https://github.com/silviomoreto/bootstrap-select/issues/1422

あなたは、 "重複の問題" とはどういう意味ですか？ selectオプションが見出しの上に表示されるという事実は、私のUXの問題ではありません。ネイティブのselectがどのように動作し、ユーザはメニューを閉じるために他の場所をクリックすることができます。

データコンテナを指定すると、そのコンテナ内のオプションメニューが制限されますが、これは最適ではない場合があります。さらに、上記で指定された問題は、このオプションに問題があることを示しています。

Answer 3

ちょうどその位置を追加してください。下のクラスへのブートストラップ・select.css

.bootstrap-select.btnグループ.dropdownメニューで{

min-width: 100%; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
position: sticky; 

}