Автозаповнення jQuery-UI погано відображається, проблема з індексом z

83

На даний момент я реалізую автозаповнення інтерфейсу jQuery у веб-магазині своїх клієнтів. Проблема полягає в тому, що елемент, в якому знаходиться автозаповнення, має вищий z-індекс, ніж z-індекс автозавершення. Я спробував встановити z-index автозаповнення вручну, але у мене склалося відчуття, що інтерфейс jQuery перезаписує це.

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

Будь-яка допомога вітається!

Мартін

— Мартін
джерело

3

Чи допоможе вам це? stackoverflow.com/questions/3549860/…

— Тім,

2

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

— Ігор Димов

У мене така сама проблема, але помилка з’являється лише в Chrome. Здається, жодне рішення тут не працює. Хто-небудь може мені допомогти?

— Нівс

104

Використовуйте z-indexта!important

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

— Ранчо
джерело

Минув деякий час з того часу, як я опублікував це запитання, але я неясно пам’ятаю, що javascript (і, отже, jQuery) зміг перезаписати властивості CSS, хоча вони визначені як "! Важливі".

— Martijn

1

+1 using! Важливий на моїй користувацькій таблиці стилів також дуже добре працював для мене і був набагато кращим рішенням, ніж використання зворотного виклику open ().

— Alex Fairchild

Я прийняв цю відповідь на свою користь, оскільки згоден, що це рішення набагато приємніше. Я не перевірив відповідь ..

— Martijn

Я новачок у jQuery, і ця відповідь дуже хороша. Працював у мене. Мені було важко знайти, де було .ui-autocomplete, але нарешті знайшов його в jquery-ui.css, передав йому z-індекс і альта!

— atsurti

Чудова відповідь. Також працював зі мною. Просто додати пару лакомочок. По-перше, дані автозаповнення містяться в класі, який називається ui-autocomplete, який потім можна стилізувати у вашому css, як зазначено вище. По-друге, якщо ви використовуєте автозаповнення з Bootstrap, меню, яке завжди знаходиться зверху, має z-індекс 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

— Нойо

10

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

— Граціана
джерело

1

Автозаповнення додається до кінця вмісту тіла, тож він матиме індекс bodys + 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; }

— maseo
джерело

1

Ласкаво просимо до StackOverFlow.com, це повинен бути коментар або більш складна відповідь.

— Дієго С Наскіменто

це неправильно, коли jquery ui потрібно спливати щось нове, він просто бере попередній z-індекс і збільшує його на 1, використовуючи 9999, він працює лише один раз, наступний елемент ui матиме z-індекс 10.000, що знову спричинить проблему.

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

8

Спробуйте це, ви можете маніпулювати z-індексом під час виконання або ініціалізації

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

— Ipad
джерело

2

Якщо ви можете застосувати вищий z-індекс при введенні тексту автозавершення, це рішення вашого рішення.

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

Отже, ви можете вказати z-індекс 999 для введення тексту, автозаповнення матиме значення z-індексу 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 всередині модального діалогового вікна інтерфейсу - пропозиції не відображаються?

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

-1

Спробуйте все-таки у своєму css (перед завантаженням сценарію), а не у firebug:

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

У моєму випадку це працює і створює z-індекси, такі як: 100x (наприклад, 1002)

— avall
джерело

1

З якоїсь причини встановлення z-індексу через CSS не працює. jQuery просто призначає власне значення z-індексу. Хоча знайшов рішення (див. Відповідь нижче)

— Martijn

-1

додати наступне

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

у файлі jquery-custom-ui.css (або зменшеному, якщо ви його використовуєте).

— Зеешан Алі
джерело

-1

Для тих розробників, які все ще використовують цей плагін. Спробуйте це:

.acResults
{
    z-index:1;
}

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

— Ясель
джерело