web-dev-qa-db-ja.com

bootstrap modalへのオートコンプリートの問題

モーダルダイアログブートストラップ内の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;
}

[〜＃〜] edit [〜＃〜]問題が見つかりました：

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

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

ここ JsFiddle/1 。

jquerytwitter-bootstrapjquery-ui-autocompletebootstrap-modal
63
Lughino

位置は「絶対」であることは正しいですが、これを autocomplete のオプションとして指定する必要があります。

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

ボックスを任意の要素の結果で固定できる場合、フォームのクラスに固定されないようにする必要があります！

ここに 動作するJsFiddle！ です。

106
Lughino

z-indexの問題に関する上記の解決策は機能しました。

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

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

45
Tolga Köseoğlu

appendToのドキュメントをご覧ください ：

値がnullの場合、入力フィールドの親のui-frontのクラスがチェックされます。 ui-frontクラスを持つ要素が見つかった場合、メニューはその要素に追加されます。

そのため、クラス「ui-front」を親要素に追加するだけで、オートコンプリートはモーダル内に正しく表示されます。

26
Fernando Pinheiro

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

19
Skarimi

実際の問題は、Bootstrap Modalがページ内の他の要素よりも高いZ-indexを持っていることです。したがって、オートコンプリートは実際に機能しますが、ダイアログの後ろに隠れます。

追加したcssファイルのいずれかにこれを追加するだけです。

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

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

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

注：jquery-ui.cssおよびjquery-ui.jsの後にこのCSSを追加します

3
dsandrade

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

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

プロパティに高い値を指定し、DO ADDを指定してください。

！重要

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

3
The Humble Angy

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

0
Harish kakani

これで解決しました。

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

オートコンプリートエクステンダーの補完リストには、このようなid = '_ completionListElem'のようなIDがあります。

したがって、z-index ..を押し上げてから、bootstrapモーダルパネル;）

それが役に立てば幸い

0
user5541665