NgbTypeahead component doesn't scroll inside a scrollable component

Related searches

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>

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

Here is the plunkr : http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview

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

As NgbTypeahead does not have support with scroll, we need to handle from component. Use showDropdownEle function on keydown of Input.

private isElementInViewport(el, inputElem) {
const rect = el.getBoundingClientRect();
const rectElem = inputElem.getBoundingClientRect();
console.log(rectElem);
return (
  rect.top >= rectElem.bottom &&
  rect.left >= 0 &&
  rect.bottom <= (rectElem.bottom + rect.offsetHeight) &&
  rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

public showDropdownEle(event) {
if (event.keyCode === 38 || event.keyCode === 40) {
  if (event.target.nextElementSibling && event.target.nextElementSibling.nodeName === 'NGB-TYPEAHEAD-WINDOW') {
    let activeDropdownEle = (event.keyCode === 40) ? event.target.nextElementSibling.querySelector('.active').nextElementSibling : event.target.nextElementSibling.querySelector('.active').previousElementSibling;
    if (!activeDropdownEle) {
      const allDropdownElems = event.target.nextElementSibling.querySelectorAll('.dropdown-item');
      activeDropdownEle = (event.keyCode === 38) ? allDropdownElems[allDropdownElems.length - 1] : allDropdownElems[0];
    }
    if (!this.isElementInViewport(activeDropdownEle, event.target) && event.keyCode === 40) {
      activeDropdownEle.scrollIntoView(false);
    }
    if (!this.isElementInViewport(activeDropdownEle, event.target) && event.keyCode === 38) {
      activeDropdownEle.scrollIntoView(true);
    }
  }
}
}

Angular powered Bootstrap, Component. A component that helps with text highlighting. If splits the result text into parts Selector input[ngbTypeahead]. Exported as ngbTypeahead. Inputs� I recently swapped my Auto complete logic in an application to use ng-bootstrap's nice and relatively easy to use TypeAhead control and I ran into a small snag trying to figure out how to bind dynamic data retrieved from the server. The examples show local data binding but fail to show how to load and update the control with remote data. In this post I show how the control works both in sync

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

re: Using the ng-BootStrap TypeAhead Control with Dynamic Data, 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� fix(typeahead): typeahead with initial object value displays [object Object] instead of default value #749

typeahead-scrollable.html file

<input id="typeahead-scrollable" type="text" class="form-control" (keydown)="typeaheadKeydown($event)" #typeaheadInstance="ngbTypeahead" [(ngModel)]="model" [ngbTypeahead]="search" [resultFormatter]="formatter" 

typeahead-scrollable.ts file

    @ViewChild('typeaheadInstance')
    private typeaheadInstance: NgbTypeahead;

    typeaheadKeydown($event: KeyboardEvent) {
      if (this.typeaheadInstance.isPopupOpen()) {
        setTimeout(() => {
          const popup = document.getElementById(this.typeaheadInstance.popupId);
          const activeElements = popup.getElementsByClassName('active');
          if (activeElements.length === 1) {
            // activeElements[0].scrollIntoView();
            const elem = (activeElements[0] as any);
            if (typeof elem.scrollIntoViewIfNeeded === 'function') {
              // non standard function, but works (in chrome)...
              elem.scrollIntoViewIfNeeded();
            } else {
              //do custom scroll calculation or use jQuery Plugin or ...
              this.scrollIntoViewIfNeededPolyfill(elem as HTMLElement);
            }
          }
        });
      }
    }

    private scrollIntoViewIfNeededPolyfill(elem: HTMLElement, centerIfNeeded = true) {
      var parent = elem.parentElement,
        parentComputedStyle = window.getComputedStyle(parent, null),
        parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
        parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
        overTop = elem.offsetTop - parent.offsetTop < parent.scrollTop,
        overBottom = (elem.offsetTop - parent.offsetTop + elem.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
        overLeft = elem.offsetLeft - parent.offsetLeft < parent.scrollLeft,
        overRight = (elem.offsetLeft - parent.offsetLeft + elem.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
        alignWithTop = overTop && !overBottom;

      if ((overTop || overBottom) && centerIfNeeded) {
        parent.scrollTop = elem.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2;
      }

      if ((overLeft || overRight) && centerIfNeeded) {
        parent.scrollLeft = elem.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + elem.clientWidth / 2;
      }

      if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
        elem.scrollIntoView(alignWithTop);
      }
    }

Working example:

https://stackblitz.com/edit/angular-utd9ii?file=app%2Ftypeahead-scrollable.ts

NgbTypeahead component doesn't scroll inside a - html, But the component I am working on is a part of a large platform. I don't think it would be wise to reproduce a plunkr of the platform. Installation. We strongly recommend using Angular CLI for setting up a new project. If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it.

NgbTypeahead does not display suggestions within `ng-template , This stackblitz fork shows that the ngbTypeahead directive does not pkozlowski -opensource added type: feature component: typeahead� Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead

Typeahead: add support for changing the search function , I have a stackblitz with a ngbTypeahead input for addresses. As you type it sends the string to the ArcGIS API, and provides a list of suggestions to populate the type ahead dropdown. This was work…

Doesn't take part in the controller lifecycle, which means you can't use filters in a view component. View component methods. A view component defines its logic in an InvokeAsync method that returns a Task<IViewComponentResult> or in a synchronous Invoke method that returns an IViewComponentResult. Parameters come directly from invocation of

pkozlowski-opensource added needs: info needs: stackblitz component: typeahead labels Sep 16, 2016 pkozlowski-opensource added this to the Purgatory milestone Sep 16, 2016 JanHuege closed this Sep 16, 2016

Comments
  • the "ngb-typeahead-window" (where the options appear) have position:absolute. You can put all in a div with position:relative, e.g. your main div can look like <div style="height: 300px; overflow-y: auto; position:relative">. See css-tricks.com/absolute-positioning-inside-relative-positioning
  • Thanks. I just did what you've said before seeing your comment and it works. Thanks anyway.
  • I use this as your recommendation: ``` <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> ``` It works well except that it shows the ugly empty space when the list is not shown (or it does not have focus) empty space below the item [dropdown list works well](i.stack.imgur.com/L1m
  • Do you have a complete example that I can look at to see how you added vertical scroll bars to the ngbtypeahead component?
  • just bind keydown event to ngb typeahead input and call showDropdownEle($event) function. e.g. (keydown)="showDropdownEle($event)"