Добавьте полосу прокрутки к ngbTypeahead - PullRequest
Новая
       30

Добавьте полосу прокрутки к ngbTypeahead

0 голосов
/ 16 мая 2019

ngbTypeahead не предлагает полосу прокрутки.Я использую это как рекомендацию от Компонент NgbTypeahead не прокручивается внутри прокручиваемого компонента : 

            <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>

Он работает хорошо, за исключением того, что показывает уродливое пустое пространство, когда список не отображается(или у него нет фокуса)

enter image description here

enter image description here

Как удалить пустое пространствои наложение появляется поверх другого элемента, когда появляется список с полосой прокрутки?

Спасибо за помощь.

1 Ответ

0 голосов
/ 29 мая 2019

Я решил эту проблему, переместив стиль «высота» вверх: 

[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>

Где dropdownHeight обновляется в файле .ts компонента в функции searchOrigin: 

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

}

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

Я ценю любое улучшение.

...