Автозаполнение JqueryUi показано в неправильном месте при использовании поля ввода в div с позицией: fixed
У меня есть "модальное окно" на веб-странице, полученной путем применения к div
свойства css position
до fixed
. div
содержит поля ввода. В частности, я использую виджет автозаполнения от jQueryUI. Существуют две основные проблемы:
1) первое заключается в том, что, поскольку div имеет фиксированную позицию, когда вы прокручиваете веб-страницу, предложения автозаполнения не отображаются исправленными, а перемещаются вверх и вниз со страницей. Вы можете увидеть эту проблему на этом Codepen, где я использую пример с сайта jQuery с автозаполнением имени города.
2) Вторая проблема заключается в том, что предложения из автозаполнения показаны в верхнем левом углу страницы, а не только под полем ввода. К сожалению, я попытался воспроизвести эту проблему в Codepen, но не могу.
Я уверен, что проблема связана с CSS и, в частности, с такими свойствами стиля, которые предоставляет JQuery-UI. Возможно, проблему можно решить, используя опцию позиции виджета автозаполнения.
Какое свойство CSS следует определить и как?
PS: Я использую тему, представленную в http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.
Ответы
Ответ 1
Посмотрев на библиотеку пользовательского интерфейса jQuery, я вижу, что элемент < > ul > используется для отображения предложений. jQuery UI добавляет этот элемент по умолчанию к HTML-документу, а не к <div> (используется как "модальное окно" ) текста ввода.
Однако документация показывает, что параметр appendTo настраивает, к какому элементу следует добавить автозаполнение <ul> . Он использует функцию jQuery appendTo()
.
http://jqueryui.com/demos/autocomplete/#option-appendTo
Итак, я включил div, содержащий предложения:
<input type="text" id="myInput" />
<div id="container">
</div>
И в функции autocomplete()
я добавил параметр:
appendTo: "#container"
Затем я добавил следующий CSS
#container {
display: block;
position:relative
}
.ui-autocomplete {
position: absolute;
}
Что все!
Ответ 2
была та же проблема. Удалить основные темы jquerUI, удалить библиотеку jqueryUI, а затем переустановить jqueryUI и теперь отлично работает. Не уверен, с чем вы работаете, но я на MVC4 так много ошибок, я собираюсь убить себя. Удачи.
EDIT: это была настоящая проблема
При взгляде на более старый проект, чтобы увидеть, работает ли автозаполнение, мы обнаружили, что многие стили в более старом проекте не были в новее. Не уверен, что я их уничтожил, но не могу себе представить. Все, что мне нужно было сделать, это скопировать и вставить те классы, которые отсутствовали в моем новом проекте, и все вернулось к норме. Я думаю, что кто-то саботирует мой проект.
Ответ 3
Убедитесь, что вы загружаете только одну версию JQuery и один из пользовательских интерфейсов
Я обнаружил это после прочтения ответа @Riapp, я играл и видел, что вам нужны соответствующие номера версий и никогда не слишком много....
В противном случае автозаполнение будет абсолютным и пролетел бы вверх.
<script type="text/javascript"
src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css"
href="#" onclick="location.href='https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css'; return false;" />