73

モーダル ダイアログ ブートストラップ内の jQuery オートコンプリートに表示上の問題があります。

マウスをスクロールすると、結果が入力に添付されたままになりません。

これを解決する方法はありますか？

ここでJsFiddle：

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

編集 問題が見つかりました：

.ui-autocomplete {
  position: fixed;
  .....
}

モーダルにスクロールがある場合、問題は残ります!

ここでJsFiddle/1。

4

12 に答える 12

55

問題について話している上記の解決策はz-indexうまくいきました：

.ui-autocomplete { z-index:2147483647; }

.jsモーダル AND オートコンプリート ロジックの処理を担当するスクリプトの前に配置してください。

于 2013-08-08T15:05:42.363 に答える
22

クラス「ui-front」を div 親要素に追加すると、オートコンプリートが PopUp For Me 内に正しく表示されます。

于 2016-07-16T13:39:30.560 に答える
5

これを修正するには、cssjQuery でファイルを変更する必要がありました。

.ui-front {
    z-index: 9999;
}

注: jquery-ui.css & jquery-ui.js の後にこの css を追加します。

于 2015-10-08T15:41:14.277 に答える
4

これを追加してみてください：

.ui-autocomplete {
  z-index: 215000000 !important;
}

プロパティに高い価値を与えることを確認し、追加してください

！重要

それは本当に重要です。後者は、同じクラスの他のルールよりも先に、このルールを最初に実行するようブラウザに指示します。それが役立つことを願っています

于 2016-01-20T15:38:57.220 に答える
0

オプションを追加すると、appendToこの問題は解決しました。ブートストラップ モデルのオブジェクトの 1 つにメニューを追加しました。

于 2016-01-08T22:44:40.173 に答える
-1 
.ui-front {
    z-index: 9999;
}

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>
于 2016-09-28T15:33:32.260 に答える