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

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

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

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

здесь 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.

10 56
jquery twitter-bootstrap jquery-ui-autocomplete bootstrap-modal

10 ответов:

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

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

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

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

88

вышеуказанное решение говорит о z-index проблема работал:

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

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

38

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

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

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

17

добавить класс "ui-front" к родительскому элементу div и автозаполнению будет правильно отображаться внутри всплывающего окна для меня.

14

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

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

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

чтобы исправить это, мне просто нужно изменить в css file by jQuery:

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

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

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

просто убедитесь, что вы даете высокое значение свойству и ДОБАВИТЬ

!важно

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

2

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

0

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

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

Autocomplete extender список завершения имеет utomated ID, как это идентификатор=' _completionListElem'

таким образом, вы должны нажать на Z-индекс .. верхняя часть модальной панели bootstrap;)

надеюсь, что это помогает

0
.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>
-1