Проблема автозаполнения в bootstrap modal

У меня проблема с отображением в автозаполнении 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;
}

ИЗМЕНИТЬ Я нашел проблему:

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

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

Здесь JsFiddle/1.

Ответы

Ответ 1

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

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

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

Здесь работает JsFiddle!.

Ответ 2

Вышеупомянутое решение, говорящее о проблеме z-index, сработало:

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

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

Ответ 3

Проверьте документацию appendTo:

Когда значение равно null, родители поля ввода будут проверен на класс ui-front. Если элемент с классом ui-front, меню будет добавлено к этому элементу.

Итак, просто добавьте класс "ui-front" к родительскому элементу, и автозаполнение будет правильно отображаться внутри модального файла.

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Список завершений автозаполнения автозаполнения имеет utomated ID, подобный этому ID = '_ completionListElem'

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

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

Ответ 10

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

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ui-front">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>