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
angular typeahead ngx-bootstrap
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
add a comment |
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
angular typeahead ngx-bootstrap
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
add a comment |
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
angular typeahead ngx-bootstrap
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
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
angular typeahead ngx-bootstrap
angular typeahead ngx-bootstrap
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
edited Nov 15 '18 at 21:51
Ed Lang
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
asked Nov 14 '18 at 19:26
Ed LangEd Lang
12
12
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307470%2fngx-bootstrap-typeahead-with-optionslisttemplate-not-respecting-typeaheadoptions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
add a comment |
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
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
add a comment |
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
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
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
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
answered Nov 14 '18 at 21:58
Gabriel LopezGabriel Lopez
28217
28217
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
add a comment |
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
I think this would mimic the [typeaheadOptionsLimit] attribute which reduces the source list to only ever provide those 6 items. What I am looking for is to have the scrollable view display 6 items but still be able to scroll through the remaining match items. In the attached stackblitz link, the options shows all of the items in one big list instead of scrolling with 6 displaying.
– Ed Lang
Nov 15 '18 at 14:00
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
Oh yes... that is correct... totally miss understood it ... I shall think something else
– Gabriel Lopez
Nov 15 '18 at 14:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307470%2fngx-bootstrap-typeahead-with-optionslisttemplate-not-respecting-typeaheadoptions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
