У меня проблемы с автозаполнением jquery-ui и слайдером в той же форме (z-index) - PullRequest
Новая
       11

У меня проблемы с автозаполнением jquery-ui и слайдером в той же форме (z-index)

3 голосов
/ 23 августа 2010

Я пытаюсь создать веб-страницу, используя jQuery ui lib. Мой дизайн использует автозаполнение пользовательского интерфейса jQuery в поле ввода в верхней части формы. Непосредственно под этой формой автозаполнения есть несколько ползунков jQuery. Проблема заключается в том, что при заполнении поля автозаполнения результаты отображаются за ручкой ползунка. Это происходит из-за способа, которым jQuery строит ползунки, из-за чего их части имеют z-индекс 3. По-видимому, z-индекс выпадающей части элемента управления автозаполнением jquery всегда равен 1. Я попытался увеличить z -index входного элемента, который автоматически завершается, но это, кажется, не влияет на z-индекс элемента, который jquery создает для выпадающего меню автозаполнения. Я также попытался написать свой собственный javascript, чтобы получить элемент выпадающего меню по классам (это ul) и вручную установить его z-index. Кажется, это тоже не работает. Я предполагаю, что это означает, что каким-то образом код jQuery перезаписывает изменение z-index, которое я делаю. Это не ошибка браузера, поскольку это проблема в Firefox, Chrome, Safari и IE. Это проблема с фактическим z-индексом, который jQuery выдает в раскрывающемся списке (элемент UL).

У кого-нибудь есть решение этой проблемы? Как обычно работать с элементами, которые jQuery автоматически генерирует для создания своих элементов управления.

Ответы [ 3 ]

8 голосов
/ 07 декабря 2010

Использование событий открытия и закрытия для изменения z-index работало для меня: 

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

См. Демонстрацию здесь .

2 голосов
/ 29 января 2012

Согласно http://bugs.jqueryui.com/ticket/5238,, кажется, есть 2 решения для этого.

«Изменение z-index на 3, кажется, полностью это исправляет.»

Вы можете сделать это на своем CSS, вам просто нужно добавить "! Important", чтобы переопределить значение, которое устанавливает библиотека: 

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

Или, «установить положение: относительно ввода автозаполнения, так что .zIndex () может фактически вычислить z-индекс.»

0 голосов
/ 21 октября 2018

Это то, что я сделал, чтобы установить z-index для автозаполнения: 

$("#myInputId").autocomplete({
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "some url",
            type: "POST",
            dataType: "json",
            data: { /* some code... */ },
            success: function (data) { /* some code... */ }
        })
    }
});
...