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

Question

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

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

Answer 1

Используя открытые и близкие события, чтобы изменить Z-индекс работал для меня:

$("#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); } 
}); 

Смотреть демо here.

Answer 2

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

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

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

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

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