Question

ngbTypeahead不提供滚动条。我将此用作NgbTypeahead component doesn't scroll inside a scrollable component的推荐内容：

            <div style="height: 300px; overflow-y: auto; position:relative">
                <input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
                    [resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
            </div>

效果很好，除了在不显示列表（或没有焦点）时显示难看的空白空间

当带有滚动条的列表出现时，如何删除空白区域并在其他元素上弹出叠加图？

谢谢您的帮助。

Answer 1

我已经通过提高“高度”样式解决了这个问题：

[style.height]="data.origin? '5rem': dropdownHeight":

如我所见，对于ngbTypeahead，当用户未选择任何项时，data.origin是未定义的，因此我希望当用户从下拉列表中选择某项时，将高度设置为最小值。

.html文件中的

        <div class="form-group row" [class.has-danger]="searchFailedOrigin" [style.height]="data.origin? '5rem': dropdownHeight">

            <label for="origin" class="col-sm-4 col-form-label col-form-label-sm">Origin</label>

            <div class="col-sm-7 col-offset-sm-1" style="overflow-y: auto; position:relative">

                <input type="text" name="origin" class="form-control form-control-sm" id="origin" [(ngModel)]="data.origin" [editable]="false" [ngbTypeahead]="searchOrigin"
                    [resultFormatter]="formatDropdown" [inputFormatter]="formatSelected" placeholder="Search..."/>
            </div>

            <div class="form-control-feedback" *ngIf="searchFailedOrigin">No Airports Found...</div>

        </div>

在searchOrigin函数的.ts组件中dropdownHeight更新的地方：

searchOrigin = (text$: Observable<string>) => {
    .
    .
    .

    // response is the response from server. It is a list of data filtering by "text"

    this.dropdownHeight = response.data.length <= 1? `5rem`: response.data.length <= 10? `${(response.data.length + 1) * 2.56}rem`: `28rem`;

    // An item in the dropdown list is 2.56rem in height
    // I want the maximum height is 28rem.
    .
    .
    .

}

此解决方案可以在不显示下拉列表时删除难看的空白空间，但是下拉列表不会覆盖其他元素。

我非常感谢。

将滚动条添加到ngbTypeahead

1 个答案: