The NgbTypeahead element is not able to scroll when placed within a scrollable container

Question

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Currently, I am utilizing the NgbTypeahead component from ng-bootstrap. The issue I am facing is that when I place the typeahead component within a scrollable element and proceed to scroll down, the position of the dropdown container remains unchanged.

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

This could potentially be a minor CSS problem that has eluded my attempts at resolving it.

For further reference, here is the link to the plunkr : http://plnkr.co/edit/rxOhDy72YWlLy9U4Ujcd?p=preview

To observe the issue firsthand, simply input a character into the text box and then proceed to scroll up and down.

css angular ng-bootstrap

Answer 1

Answer №1

Add the code snippet below to your styles.css file.

You have the option to insert this code in one of the following locations:

styles.css
style tag within index.html

ngb-typeahead-window {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

Find the functioning code on stackblitz through this link: https://stackblitz.com/edit/angular-qpzsfv

Answer 2

Add the code snippet below to your styles.css file.

You have the option to insert this code in one of the following locations:

styles.css
style tag within index.html

ngb-typeahead-window {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

Find the functioning code on stackblitz through this link: https://stackblitz.com/edit/angular-qpzsfv

Answer 3

Answer №2

If you want to incorporate a vertical scroll bar into your typeahead results, consider implementing the following code:

ngb-typeahead-window.dropdown-menu {
    max-height: 500px !important;
    overflow-y: auto;
}

Answer 4

If you want to incorporate a vertical scroll bar into your typeahead results, consider implementing the following code:

ngb-typeahead-window.dropdown-menu {
    max-height: 500px !important;
    overflow-y: auto;
}

Answer 5

Answer №3

Find the typeahead-scrollable.html file below:

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

Check out the typeahead-scrollable.ts file for the corresponding TypeScript code:

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

    typeaheadKeydown($event: KeyboardEvent) {
        // Code for handling keydown events in the typeahead
    }

    private scrollIntoViewIfNeededPolyfill(elem: HTMLElement, centerIfNeeded = true) {
        // Polyfill function to handle scrolling elements into view
    }

If you'd like to see a working example, visit this link:

Working Example on StackBlitz

Answer 6

Find the typeahead-scrollable.html file below:

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

Check out the typeahead-scrollable.ts file for the corresponding TypeScript code:

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

    typeaheadKeydown($event: KeyboardEvent) {
        // Code for handling keydown events in the typeahead
    }

    private scrollIntoViewIfNeededPolyfill(elem: HTMLElement, centerIfNeeded = true) {
        // Polyfill function to handle scrolling elements into view
    }

If you'd like to see a working example, visit this link:

Working Example on StackBlitz

Answer 7

Answer №4

Since NgbTypeahead lacks scroll support, we must manage it from the component. Utilize the showDropdownEle function upon 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);
    }
  }
}
}

Answer 8

Since NgbTypeahead lacks scroll support, we must manage it from the component. Utilize the showDropdownEle function upon 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);
    }
  }
}
}

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Two nested divs positioned below text within a parent div

Unable to populate data in dropdown using Angular framework?

Automatically adjusting the top margin of the main content section depending on the variable height of a fixed header

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

Angular: extracting value from forkJoin nested within another observable's pipe

Is Fullpage.js functioning only on local servers?

How can I utilize the LED flash on a Windows Phone using WinJS?

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Ensure that the input box expands to occupy the entire HTML page

What are the most effective applications for utilizing an Observable Data Service?

Arrange the text in a div element in a horizontal direction

The most sophisticated method for creating a 2x2 grid of divs

Modifying td background color according to values in a PHP array

Internet Explorer is throwing unexpected routing errors in Angular 2

Steps for sending a POST request for every file in the given array

Floating and scrolling navigation bar not functioning properly in bootstrap framework

Highcharts' labels on the x-axis do not automatically rotate

Creating an element in react-draggable with two sides bound and two sides open - here's how!

Ways to minimize excessive gap between two columns in Bootstrap

Writing unit tests for an Angular2 service that depends on Electron functionality