現在、クライアントのWebショップでjQuery UIのオートコンプリートを実装しています。問題は、オートコンプリートが存在する要素が、オートコンプリートのz-indexよりも高いz-indexを持っていることです。オートコンプリートz-indexを手動で設定しようとしましたが、jQuery UIがこれを上書きしていると感じました。
実際、私の質問は オートコンプリート候補リストの間違ったz-index、どのように変更できますか? の複製ですが、答えがなかったので、もう一度試してみようと考えました。
どんな助けでも大歓迎です!
マルティン
つかいます z-index
および!important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
検索中にこのトピックを見つけました(http://forum.jquery.com/topic/alternating-style-on-autocomplete)。どうやら、オートコンプリートボックスのスタイルを変更する唯一の方法は、javascriptを使用することです。
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
親Divのz-indexを変更すると、オートコンプリートメニューにはdivのz-index + 1が表示されます
jQuery UI
のCSS:
.ui-front { z-index: 9999; }
これを試してみてください、実行時または初期化時にz-indexを操作できます
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
オートコンプリートテキスト入力に高いZインデックスを適用できる場合、これが問題の解決策です。
jQuery UIオートコンプリートオプションリストは、アタッチされているテキスト入力のz-indexを取得してそのz-index値を計算し、その値に1を追加します。
そのため、オートコンプリートのテキスト入力に999のz-indexを与えることができ、z-indexの値は1000になります。
http://bugs.jqueryui.com/ticket/5489 から取得
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
Jquery-uiダイアログを使用している場合は、オートコンプリートの前にダイアログを初期化するよう注意してください。そうしないと、ダイアログの下にオートコンプリートが表示されます。
この答えを見てください jquery UIモーダルUIダイアログ内のオートコンプリート-提案が表示されない?
アイテムを追加する場所も確認してください。オートコンプリートを内部divに追加するとこの問題に遭遇しましたが、bodyタグにオートコンプリートを追加すると、問題はなくなりました。