Angular UI Bootstrap typeahead не выходит за границы родительского div, как обычный выпадающий список
Я использую заголовок Angular UI Bootstrap для отображения настраиваемого списка предложений, когда пользователь вводит текст в элемент управления для ввода текста. Этот элемент управления формы существует внутри элемента div с использованием jQuery slimScroll, чтобы поддерживать постоянный размер элемента div, несмотря на то, что его содержимое колеблется. Я действительно надеялся, что typeahead будет отображаться поверх всего, как обычный выпадающий список html, но, к сожалению, это не так, как видно из этого плунжера. Я попытался поработать с z-index и отрегулировать положение и свойства отображения; все бесплодные усилия.
Кто-нибудь знает, как заставить всплывающее окно typeahead отображаться поверх родительской границы? Если нет, есть ли способ заставить тег select отображать содержимое HTML, чтобы я мог включить глифы, выделенный текст и т. Д. В список предложений?
2 ответа
Я просто установил typeahead-append-to-body="true" в элементе управления typeahead, и это сработало. Не знаю точно, почему, но это, безусловно, простое решение.
Проблема с тонкой прокруткой - вы находитесь внутри div с относительной позицией и скрытым переполнением (представьте, что это iFrame). Существует небольшой обходной путь... Вы можете, по существу, установить фиксированное положение сгенерированного UL (.dropdown-menu), установить для него высоту, а затем установить переполнение:scroll... Это будет работать в некоторых сценариях, где поле ввода имеет фиксированную позицию... в противном случае вам нужно будет контролировать, где находится ввод, и настраивать положение автозаполнения, чтобы следовать, и целый ряд других неприятных скриптов.
Не глядя на ваше приложение, я не могу понять, почему у вас именно эта архитектура, но я могу сказать, что должны быть более понятные варианты для обработки автозаполнения за пределами slimscroll.