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

Question

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

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

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

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

Martijn

606 11

jQuery javascript jquery-ui autocomplete

11 ответов:

Comments

Ничего не найдено.

Ranch · Accepted Answer · 2018-10-03 20:08:57

использовать z-index и !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

Martijn · Accepted Answer · 2011-07-20 16:28:55

во время поиска я нашел эту тему (http://forum.jquery.com/topic/alternating-style-on-autocomplete). по-видимому, единственный способ изменить стиль окна автозаполнения - это сделать это через javascript:
    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Gratian · Accepted Answer · 2012-03-10 19:40:48

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

Ipad · Accepted Answer · 2013-05-03 14:04:39

попробуйте это, вы можете манипулировать Z-индекса во время выполнения или инициализации
$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

maseo · Accepted Answer · 2014-01-10 02:59:18

в CSS jQuery UI:
.ui-front { z-index: 9999; }

8

2014-01-10 02:59:18

Harry B · Accepted Answer · 2013-09-26 02:16:20

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

raviraj shimpi · Accepted Answer · 2015-10-01 14:12:03

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

avall · Accepted Answer · 2011-07-20 15:56:46

попробуйте в любом случае в вашем css (перед загрузкой скрипта), а не в firebug:
.ui-selectmenu-menu {
    z-index:100;
}
в моем случае это работает и создает z-индексы, такие как: 100x (например 1002)

pgee70 · Accepted Answer · 2013-03-15 05:56:17

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

Zeeshan Ali · Accepted Answer · 2013-08-12 13:36:56

добавить следующее
.ui-autocomplete
{
    z-index:100 !important;
}
в jQuery-пользовательский интерфейс.css-файл (или уменьшенный, если вы его используете).

Yasel · Accepted Answer · 2016-10-24 21:26:43

для тех разработчиков, которые все еще используют этот плагин. Попробуйте это:
.acResults
{
    z-index:1;
}
для меня было достаточно с z-index: 1, установите значение, которое вам нужно в вашем случае.