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

Question

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

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

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

Martijn

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

В CSS jQuery UI:

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

Answer 5

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

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

Answer 6

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

Answer 7

Если вы можете использовать более высокий 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">

Answer 8

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

.acResults
{
    z-index:1;
}

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

Answer 9

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

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

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

Answer 10

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