it-roy-ru.com

Автозаполнение jQuery-UI не отображается должным образом, проблема z-index

В настоящее время я внедряю автозаполнение jQuery UI в своем клиентском интернет-магазине. Проблема в том, что элемент, в котором находится автозаполнение, имеет более высокий z-индекс, чем z-индекс автозаполнения. Я попытался установить z-index для автозаполнения вручную, но у меня такое ощущение, что jQuery UI перезаписывает это.

На самом деле мой вопрос является дубликатом неправильный z-индекс списка автозаполнения, как я могу изменить? , но поскольку ответа не было, я подумал о том, чтобы попробовать еще раз.

Любая помощь приветствуется!

Мартейн

78
Martijn

Используйте z-index и !important

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

Во время поиска я нашел эту тему (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Видимо, единственный способ изменить стиль окна автозаполнения - это сделать это с помощью javascript:

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

Измените z-index родительского Div, в меню автозаполнения будет z-index div + 1

10
Gratian

В CSS jQuery UI:

.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 Autocomplete вычисляет значение z-index, беря z-index текстового ввода, к которому он присоединен, и добавляет 1 к этому значению.

Таким образом, вы можете задать z-индекс 999 для ввода текста, автозаполнение будет иметь значение 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

также посмотрите, куда вы добавляете элемент. я столкнулся с этой проблемой, когда я добавил автозаполнение к внутреннему div, но когда я добавил автозаполнение к тегу body, проблема исчезла.

0
pgee70