NgbTypeahead组件无法在可滚动组件内滚动 [英] NgbTypeahead component doesn't scroll inside a scrollable component

问题描述

我正在使用ng-bootstrap的NgbTypeahead组件.我的问题是，当我将typeahead组件放入可滚动组件中并向下滚动时，下拉容器的位置不会改变.

I am using NgbTypeahead component of ng-bootstrap. My problem is, when I put the typeahead component inside a scrollable component and make a scroll down, the position of dropdown container doesn't change.

<div style="height: 300px;   overflow-y: auto;">
...
<input id="typeahead-template" type="text" class="form-control [(ngModel)]="model" 
       [ngbTypeahead]="search" [resultTemplate]="rt [inputFormatter]="formatter" />
...
</div>

这可能是CSS的一个小问题，但我找不到解决方案.

It could be a small CSS issue but I could not find the solution.

这是the客: http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview

在文本框中输入一个字符，然后上下滚动

Type in a character in the text box and then scroll up-down

推荐答案

要添加垂直滚动条以提前输入结果，可以使用以下方法:

To add a vertical scroll bar to typeahead results, you can use something this:

ngb-typeahead-window.dropdown-menu {
    max-height: 500px !important;
    overflow-y: auto;
}

这篇关于NgbTypeahead组件无法在可滚动组件内滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！