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

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

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

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

Мартейн

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

В CSS jQuery UI:

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

Ответ 5

Попробуйте это, вы можете манипулировать z-индексом во время выполнения или инициализировать

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

Ответ 6

Если вы можете обеспечить более высокий z-индекс при вводе текста автозаполнения, это решение вашей проблемы.

Список опций автозаполнения jQuery UI вычисляет значение z-индекса, беря z-индекс вводимого текста, к которому он присоединен, и добавляет 1 к этому значению.

Таким образом, вы можете указать z-индекс 999 для ввода текста, автозаполнение будет иметь значение z-index 1000

Взято из http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

Ответ 7

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

Ответ 8

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

Ответ 9

Если вы используете диалоги jquery-ui, будьте осторожны, чтобы инициализировать их, ДО того, как автозаполнение или автозаполнение будет показано в диалоге.

Посмотрите на этот ответ автозаполнение jquery UI в диалоге модального интерфейса - предложения не отображаются?

Ответ 10

Дайте ему попробовать в любом случае в вашем css (до script загрузки), а не в firebug:

.ui-selectmenu-menu {
    z-index:100;
}

В моем случае это работает и создает z-индексы типа: 100x (например, 1002)

Ответ 11

добавить следующий

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

в файле jquery-custom-ui.css(или мини-, если вы его используете).

Ответ 12

Для тех разработчиков, которые все еще используют этот плагин. Попробуйте следующее:

.acResults
{
    z-index:1;
}

Для меня было достаточно с z-index: 1, установить значение, которое вам нужно в вашем случае.