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

Question 1

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

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

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

Мартейн

Question 2

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

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

Question 3

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

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

Question 4

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

Question 5

В CSS jQuery UI:

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

Question 6

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

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

Question 7

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

Question 8

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

Question 9

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

Question 10

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

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

Question 11

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

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

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

Question 12

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

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

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

Question 13

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

.acResults
{
    z-index:1;
}

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

Answer 1

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

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

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

Мартейн

Answer 2

3

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

Тим

Answer 3

2

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

Игорь Дымов

Answer 4

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

Nivs

Answer 5

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. Отличное решение. Спасибо.

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

Answer 6

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

Martijn

Answer 7

1

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

Alex Fairchild

Answer 8

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

Martijn

Answer 9

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

atsurti

Answer 10

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

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

Answer 11

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

Answer 12

2

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

Нойо

Answer 13

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

Мартейн

Answer 14

2

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

Noyo

Answer 15

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 )

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

Answer 16

1

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

Мариус

Answer 17

8

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

Нойо

Answer 18

1

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

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

Answer 19

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, что снова вызовет проблему.

Андреа Мауро

Answer 20

1

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

Diego C Nascimento

Answer 21

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

Андреа Мауро

Answer 22

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

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

Answer 23

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

Answer 24

2

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

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

Answer 25

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

Answer 26

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

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

Answer 27

-1

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

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

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

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

1

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

Martijn

Answer 28

1

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

Martijn

Answer 29

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

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

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

Answer 30

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

.acResults
{
    z-index:1;
}

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

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

Ответы: