автозаполнение jQuery-UI не отображается хорошо, Проблема с Z-индексом
в настоящее время я реализую автозаполнение jQuery UI в веб-магазине моих клиентов. Проблема в том, что элемент, в котором находится автозаполнение, имеет более высокий Z-индекс, чем z-индекс автозаполнения. Я попытался установить автозаполнение z-index вручную, но у меня такое чувство, что jQuery UI перезаписывает это.
на самом деле мой вопрос является дубликатом список предложений автозаполнения неправильный z-индекс, как я могу изменить?, но так как ответа не было, я подумал о попробую еще раз.
любая помощь приветствуется!
Martijn
11 ответов
использовать z-index
и !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
при поиске я нашел эту тему (http://forum.jquery.com/topic/alternating-style-on-autocomplete). По-видимому, единственный способ изменить стиль окна автозаполнения-это сделать это через javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
попробуйте это, вы можете управлять Z-индексом во время выполнения или инициализировать
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
Если вы можете применить более высокий Z-индекс при вводе текста автозаполнения, то это решение вашей проблемы.
jQuery UI Autocomplete options list вычисляет значение z-индекса, принимая Z-индекс текстового ввода, к которому он присоединяется, и добавляет 1 к этому значению.
таким образом, вы можете дать z-индекс 999 для ввода текста автозаполнение будет иметь значение z-индекса 1000
взяты из http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
попробуйте в любом случае в вашем css (перед загрузкой скрипта), а не в firebug:
.ui-selectmenu-menu {
z-index:100;
}
в моем случае это работает и создает z-индексы, такие как: 100x (например, 1002)
также посмотрите, куда вы добавляете элемент. я столкнулся с этой проблемой, когда я добавил автозаполнение к внутреннему div, но когда я добавил автозаполнение к тегу body, проблема ушла.
добавить следующее
.ui-autocomplete
{
z-index:100 !important;
}
в jquery-custom-ui.css-файл (или минифицированный, если вы его используете).
для тех разработчиков, которые все еще используют этот плагин. Попробуйте это:
.acResults
{
z-index:1;
}
для меня было достаточно с z-index: 1, установите значение, которое вам нужно в вашем случае.