CODEWITHSUNDEEP
angulartypeaheadngx-bootstrap
Ed Lang
Ed Lang

Reputation: 23

ngx-bootstrap typeahead with optionslisttemplate not respecting typeaheadOptionsInScrollableView value

My recreation of issue - StackBlitz link: https://stackblitz.com/edit/angular-5qqtrs

I am using ngx-bootstrap and the typeahead directive on an input text element. I need to be able to get the optionsListTemplate to show as a limited height scrollable container.

I want the list container dropdown to scroll with a limited number of items displaying (fixed height) before needing to scroll (by default this is 5 items).

I set the typeaheadOptionsInScrollableView (6) and the typeaheadScrollable (true). As long as I do not use the optionsListTemplate attribute, then the control displays correctly.

This shows what I want

When setting a custom optionsListTemplate, the control does not limit the list of displayed options.

This shows what I get

While investigating the source code for ngx-bootstrap - typeahead, the field guiHeight is used internally to set the container height based on the list items height * count from typeaheadOptionsInScrollableView attribute. This value is returning undefined.

ngx-bootstrap site:

https://valor-software.com/ngx-bootstrap/#/typeahead.

I am using angular 7.x (latest), bootstrap 4.3.1, ngx-bootstrap 3.1.1

Any help appreciated.

-- Ed

Upvotes: 0

Views: 2517

Answers (2)

evilstiefel
evilstiefel

Reputation: 496

In case anybody is still looking for an answer, I "fixed" the issue in my code by wrapping the optionsListTemplate inside of a div that just has a special CSS-class attached to it. Basically, since no height information is available to the typeaheadComponent, I specify one myself and set that div to

.scollable-container {
    max-height: 12rem;
    overflow-y: auto;
}

So it's just a CSS fix but it does the job for me. This makes no use of typeaheadOptionsInScrollableView, so be sure to not set that option. Also, I'd recommend setting the input property typeaheadOptionsLimit to something larger than what you expect to display inside the scrollable container. By default, it won't render anything beyond 20(?) entries.

Upvotes: 1

Gabriel Lopez
Gabriel Lopez

Reputation: 452

Documentation page states that optionsListTemplate has 3 template variables: matches, itemTemplate, query. So I think they never had this in mind

Easiest and fastest fix is to slice the matches array =>

<ng-template ngFor let-match let-i="index" [ngForOf]="matches.slice(0,6)">

this will only display up to 6 elements

Hope it helps

Upvotes: 0

Related Questions