feat: ropdown container

Added the ability to specify any selector in the container for the Dropdown component

demo/src/app/components/dropdown/demos/container-string/dropdown-container-string.html

@@ -0,0 +1,56 @@
+<p>
+ Set the <code>container</code> property to "body" to have the dropdown menu be appended to the body instead of where
+ it belongs. This option is useful if the dropdown is defined inside an element that clips its contents (i.e.
+ <code>overflow: hidden</code>).
+</p>
+<table class="table table-striped">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">Items</th>
+ <th scope="col">Actions</th>
+ <th scope="col">Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1</td>
+ <td>
+ Item
+ <div>
+ <small class="text-muted">Both &ldquo;Actions&rdquo; table cells define an overflow hidden</small>
+ </div>
+ </td>
+ <td class="ngb-dropdown-container">
+ <div class="overflow-hidden">
+ <div ngbDropdown container=".ngb-dropdown-container">
+ <button type="button" class="btn btn-outline-primary btn-sm" ngbDropdownToggle>Actions</button>
+ <div ngbDropdownMenu>
+ <button ngbDropdownItem>Edit</button>
+ <button ngbDropdownItem>Duplicate</button>
+ <button ngbDropdownItem>Move</button>
+ <div class="dropdown-divider"></div>
+ <button ngbDropdownItem>Delete</button>
+ </div>
+ </div>
+ <small class="text-muted">Dropdown uses container "body"</small>
+ </div>
+ </td>
+ <td>
+ <div class="overflow-hidden">
+ <div ngbDropdown>
+ <button type="button" class="btn btn-outline-primary btn-sm" ngbDropdownToggle>Actions</button>
+ <div ngbDropdownMenu>
+ <button ngbDropdownItem>Edit</button>
+ <button ngbDropdownItem>Duplicate</button>
+ <button ngbDropdownItem>Move</button>
+ <div class="dropdown-divider"></div>
+ <button ngbDropdownItem>Delete</button>
+ </div>
+ </div>
+ <small class="text-muted">Default dropdown</small>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+</table>

demo/src/app/components/dropdown/demos/container-string/dropdown-container-string.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+ selector: 'ngbd-dropdown-container',
+ standalone: true,
+ imports: [NgbDropdownModule],
+ templateUrl: './dropdown-container-string.html',
+})
+export class NgbdDropdownContainerString {}

demo/src/app/components/dropdown/dropdown.routes.ts

@@ -10,6 +10,7 @@ import { NgbdDropdownNavbar } from './demos/navbar/dropdown-navbar';
 import { NgbdDropdownSplit } from './demos/split/dropdown-split';
 import { NgbdDropdownDisabled } from './demos/disabled/dropdown-disabled';
 import { Routes } from '@angular/router';
+import { NgbdDropdownContainerString } from './demos/container-string/dropdown-container-string';
 
 const DEMOS = [
  {
@@ -54,6 +55,13 @@ const DEMOS = [
  code: 'dropdown/demos/container/dropdown-container.ts',
  markup: 'dropdown/demos/container/dropdown-container.html',
  },
+ {
+ fragment: 'container-string',
+ title: 'Container “string”',
+ type: NgbdDropdownContainerString,
+ code: 'dropdown/demos/container/dropdown-container.ts',
+ markup: 'dropdown/demos/container/dropdown-container.html',
+ },
  {
  fragment: 'navbar',
  title: 'Dynamic positioning in a navbar',

src/dropdown/dropdown-config.ts

@@ -13,5 +13,5 @@ export class NgbDropdownConfig {
  autoClose: boolean | 'outside' | 'inside' = true;
  placement: PlacementArray = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
  popperOptions = (options: Partial<Options>) => options;
- container: null | 'body' = null;
+ container: null | 'body' | string = null;
 }

src/dropdown/dropdown.ts

@@ -227,7 +227,7 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
  *
  * @since 4.1.0
  */
- @Input() container: null | 'body' = this._config.container;
+ @Input() container: null | 'body' | string = this._config.container;
 
  /**
  * Enable or disable the dynamic positioning. The default value is dynamic unless the dropdown is used
@@ -265,7 +265,7 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
 
  ngOnChanges(changes: SimpleChanges) {
  if (changes.container && this._open) {
- this._applyContainer(this.container);
+ this._applyContainer();
  }
 
  if (changes.placement && !changes.placement.firstChange) {
@@ -301,7 +301,7 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
  open(): void {
  if (!this._open) {
  this._open = true;
- this._applyContainer(this.container);
+ this._applyContainer();
  this.openChange.emit(true);
  this._setCloseHandlers();
  if (this._anchor) {
@@ -506,14 +506,18 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
  this._nativeElement.appendChild(this._menu.nativeElement);
  }
  if (this._bodyContainer) {
- this._document.body.removeChild(this._bodyContainer);
+ this._getRootContainer().removeChild(this._bodyContainer);
  this._bodyContainer = null;
  }
  }
 
- private _applyContainer(container: null | 'body' = null) {
+ private _isCustomContainer(): boolean {
+ return !!(this.container && (this.container === 'body' || typeof this.container == 'string'));
+ }
+
+ private _applyContainer() {
  this._resetContainer();
- if (container === 'body') {
+ if (this._isCustomContainer()) {
  const dropdownMenuElement = this._menu.nativeElement;
  const bodyContainer = (this._bodyContainer = this._bodyContainer || this._document.createElement('div'));
 
@@ -523,7 +527,7 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
  bodyContainer.style.zIndex = '1055';
 
  bodyContainer.appendChild(dropdownMenuElement);
- this._document.body.appendChild(bodyContainer);
+ this._getRootContainer().appendChild(bodyContainer);
  }
 
  this._applyCustomDropdownClass(this.dropdownClass);
@@ -568,4 +572,11 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
  }
  }
  }
+
+ private _getRootContainer(): HTMLElement {
+ if (this.container !== 'body' && typeof this.container == 'string') {
+ return this._document.body.querySelector(this.container) || this._document.body;
+ }
+ return this._document.body;
+ }
 }