web-dev-qa-db-ja.com

jQuery-UIのオートコンプリートがうまく表示されない、z-indexの問題

現在、クライアントのWebショップでjQuery UIのオートコンプリートを実装しています。問題は、オートコンプリートが存在する要素が、オートコンプリートのz-indexよりも高いz-indexを持っていることです。オートコンプリートz-indexを手動で設定しようとしましたが、jQuery UIがこれを上書きしていると感じました。

実際、私の質問は オートコンプリート候補リストの間違ったz-index、どのように変更できますか？ の複製ですが、答えがなかったので、もう一度試してみようと考えました。

どんな助けでも大歓迎です！

マルティン

javascriptjqueryjquery-uiautocomplete
79
Martijn

つかいます z-indexおよび!important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
98
Ranch

検索中にこのトピックを見つけました（http://forum.jquery.com/topic/alternating-style-on-autocomplete）。どうやら、オートコンプリートボックスのスタイルを変更する唯一の方法は、javascriptを使用することです。

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },
58
Martijn

親Divのz-indexを変更すると、オートコンプリートメニューにはdivのz-index + 1が表示されます

10
Gratian

jQuery UIのCSS：

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

これを試してみてください、実行時または初期化時にz-indexを操作できます

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});
7
Ipad

オートコンプリートテキスト入力に高い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">
2
Harry B
open: function () {
    $(this).autocomplete('widget').zIndex(10);
}
2
raviraj shimpi

Jquery-uiダイアログを使用している場合は、オートコンプリートの前にダイアログを初期化するよう注意してください。そうしないと、ダイアログの下にオートコンプリートが表示されます。

この答えを見てください jquery UIモーダルUIダイアログ内のオートコンプリート-提案が表示されない？

0
Andrea Mauro

アイテムを追加する場所も確認してください。オートコンプリートを内部divに追加するとこの問題に遭遇しましたが、bodyタグにオートコンプリートを追加すると、問題はなくなりました。

0
pgee70