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

Align a span vertically within a div

Is there a way to keep a div element stationary during scrolling without using fixed positioning?

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

`Can you bind ngModel values to make select options searchable?`

Issue with Angular 11: Unable to bind to 'ngForOf' as it is not recognized as a valid property of 'tr' element

Troubleshooting Bootstrap select box design discrepancies

Encase the entire section following cloning with JQuery

The height of the div element is automatically adjusted to zero

Struggling with implementing Angular and TypeScript in this particular method

Error message: The import from './components/headerComponent/header' failed because it does not have a default export. Make sure to export it as default to be able to import it

The initial update of the view does not occur when a component property changes in Angular 2 RC6

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

When using ngStyle to bind a variable, the binding variable will be null

Is there a way to determine the location where my website is fetching CSS and media files from?

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Adjust the dimensions of an Angular Material 2 dialog by updating the width or height

Retrieve the value of the second child element in a table cell when clicking on it with Javascript

Leverage variables in JavaScript to establish a unique style

Troubleshooting the issue of Angular Reactive Forms Select Option not properly selecting pre-defaulted objects

jQuery.addClass function not functioning correctly