feat: ropdown container

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

@@ -223,11 +223,10 @@ export class NgbDropdown implements OnInit, AfterContentInit, OnChanges, OnDestr
 
 	/**
 	 * A selector specifying the element the dropdown should be appended to.
-	 * Currently only supports "body".
 	 *
 	 * @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 +264,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 +300,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 +505,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 +526,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 +571,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;
+	}
 }