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

83

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

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

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

Мартейн

— Мартейн
источник

3

Вам это поможет? stackoverflow.com/questions/3549860/…

— Тим

2

Поскольку примеров кода нет, я мог бы порекомендовать установить z-index, как вы пробовали раньше, и установить его на!important

— Игорь Дымов

У меня такая же проблема, но ошибка возникает только в Chrome. Никакое решение здесь не работает. Может кто-нибудь мне помочь?

— Nivs

104

Использование z-indexи!important

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

— Ранчо
источник

Прошло некоторое время с тех пор, как я опубликовал этот вопрос, но я смутно помню, что javascript (и, следовательно, jQuery) мог перезаписывать свойства CSS, даже если они определены как "! Important".

— Martijn

1

+1 использование! Important в моей пользовательской таблице стилей также отлично сработало для меня и было гораздо лучшим решением, чем использование обратного вызова open ().

— Alex Fairchild

Я принял этот ответ в пользу своего, поскольку согласен, что это решение намного лучше. Я еще не проверил ответ ..

— Martijn

Я новичок в jQuery, и это очень хороший ответ. Работал у меня. У меня возникли проблемы с поиском, где находится .ui-autocomplete, но, наконец, нашел его в jquery-ui.css, дал ему z-index и альт, он работал!

— atsurti

Отличный ответ. Также работал со мной. Просто чтобы добавить пару лакомых кусочков. Во-первых, данные автозаполнения содержатся в классе под названием ui-autocomplete, который затем может быть оформлен в вашем CSS, как указано выше. Во-вторых, если вы используете автозаполнение с помощью Bootstrap, меню, которое всегда находится вверху, имеет z-index 1030, поэтому вам нужно будет сделать это 1031. Отличное решение. Спасибо.

— Рэнди Гринкорн,

60

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

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

— Мартейн
источник

2

Почему вы возвращаете ложь?

— Нойо

Общая парадигма в обработчиках событий заключается в том, что возвращение false предотвратит всплытие события. Хотя по прошествии четырех лет я понятия не имею, действительно ли это было необходимо в данной ситуации ..

— Мартейн

2

Спасибо за ответ, пусть даже спустя годы! В самом деле, в вашем случае это не требуется и может даже вызвать нежелательное поведение у других .. В любом случае, эта проблема теперь имеет стандартное решение ( вариант ui-frontкласса + appendToвиджета): api.jqueryui.com/theming/stacking-elements

— Noyo

10

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

— Грациан
источник

1

Автозаполнение добавляется в конец содержимого тела, поэтому оно будет иметь z-index тела + 1

— Мариус

8

@Marius, вы можете использовать appendToопцию, чтобы указать разметке меню, куда идти, в противном случае вы можете добавить класс ui-frontк одному из родительских элементов ввода.

— Нойо

1

Еще одна вещь: родительский div должен использовать относительное позиционирование ('position: relative'), иначе jQuery не сможет определить его z-индекс (см. Bugs.jqueryui.com/ticket/5489 )

— Феликс Шварц,

9

В CSS jQuery UI:

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

— Масео
источник

1

Добро пожаловать на StackOverFlow.com, это должен быть комментарий или более подробный ответ.

— Diego C Nascimento

это неправильно, когда jquery ui нужно вывести что-то новое, он просто берет предыдущий z-index и увеличивает его на 1, используя 9999, он работает только один раз, следующий элемент ui будет иметь z-index 10.000, что снова вызовет проблему.

— Андреа Мауро

8

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

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

— IPad
источник

2

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

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

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

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

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

— Гарри Б
источник

2

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

— Равирадж Шимпи
источник

0

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

— pgee70
источник

0

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

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

— Андреа Мауро
источник

-1

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

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

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

— аваль
источник

1

По какой-то причине установка z-индекса через CSS не работает. jQuery просто присваивает собственное значение z-index. Однако нашел решение (см. Ответ ниже)

— Martijn

-1

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

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

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

— Зишан Али
источник

-1

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

.acResults
{
    z-index:1;
}

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

— Ясель
источник