it-roy-ru.com

Автозаполнение вопроса в модальности начальной загрузки

У меня проблема с отображением в автозаполнении jQuery внутри модального диалогового окна начальной загрузки.

Когда я прокручиваю мышь, результаты не остаются привязанными к входу.

Есть ли способ решить это?

Здесь JsFiddle :

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

EDIT Я нашел проблему:

.ui-autocomplete {
  position: fixed;
  .....
}

Если у модала есть свиток, проблема остается!

Здесь JsFiddle/1 .

57
Lughino

Позиция правильная, что она «абсолютная», хотя вам нужно указать это как параметр для autocomplete :

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

Там, где он может привязать прямоугольник с результатами в любом элементе, я должен помешать ему привязаться к классу формы!

Здесь это рабочий JsFiddle! .

94
Lughino

Приведенное выше решение о проблеме z-index сработало:

.ui-autocomplete { z-index:2147483647; }

Убедитесь, что вы поставили его перед вашим скриптом .js, ответственным за обработку модальной логики И автозаполнения.

42
Tolga Köseoğlu

Ознакомьтесь с приложением к документации

Когда значение равно нулю, родители поля ввода будут проверено на класс пользовательского интерфейса. Если элемент с классом пользовательского интерфейса найдено, меню будет добавлено к этому элементу.

Так что просто добавьте класс «ui-front» к родительскому элементу, и автозаполнение будет корректно отображаться внутри модального поля.

20
Fernando Pinheiro

При добавлении класса "ui-front" к родительскому элементу div и автозаполнение будет правильно отображаться в PopUp For Me.

16
Skarimi

Фактическая проблема заключается в том, что Bootstrap Modal имеет более высокий Z-индекс, чем любой другой элемент на странице. Таким образом, автозаполнение действительно работает - но оно скрывается за диалогом.

Вам просто нужно добавить это в любой из ваших добавленных css файлов:

.ui-autocomplete {
  z-index:2147483647;
}
9
Sunil

Чтобы это исправить, мне просто нужно было изменить файл css с помощью jQuery:

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

Примечание: добавьте этот css после jquery-ui.css & jquery-ui.js

3
dsandrade

просто попробуйте добавить это:

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

Просто убедитесь, что вы придает большое значение собственности и DO ADD  

!важный

Это действительно важно. Последний скажет вашему браузеру выполнить это правило в первую очередь, прежде чем любой другой из того же класса . Надеюсь, это поможет

3
The Humble Angy

Добавление опции appendTo решило эту проблему. Он добавил меню к одному из объектов в модели начальной загрузки. 

0
Harish kakani

Я решил этим ....

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

Список завершения расширителя автозаполнения имеет такой автоматический идентификатор, как этот Id = ' _completionListElem '

так что вы должны нажать вверх по z-index .. выше, чем модальная панель начальной загрузки;)

Надеюсь, поможет

0
user5541665