автозаполнение jQuery-UI не отображается хорошо, Проблема с Z-индексом

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

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

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

Martijn

11 ответов


использовать 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;
    },

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


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

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

в CSS jQuery UI:

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

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

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

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

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

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

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


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


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

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

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


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

.acResults
{
    z-index:1;
}

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