Dropdown append to body

[marcalj]

Bug description:

Support for dropdown append-to-body.

Use case

In a list inside an overflowed element, the dropdown is shown "inside" the main element, and you cannot seen it completely.

Working with ng1 version:

Thanks!

[marcalj]

Coming from this issue: #584 (comment)

@scttcper

[PEsteves8]

I also need something like this. Any progress on it?

[bharding777]

would really love this feature - constantly getting caught with dropdowns under other elements....

[phillip-haydon]

Really needing this feature :(

[codeMonkeysBe]

I need this feature as well. Can I help with the implementation of this?

[clarkj]

My most common use case for dropdown-append-to-body is for building dropdown links in navbars. Does anyone know a workaround for that?

[ryanohearn]

I really need this feature. Any word on when this will be addressed?

[rkhramiankou]

+1

[nponna]

+1

[alexcouret]

Does anyone have a workaround for that?

[kotmatpockuh]

+1

[RonNewcomb]

+1

[alesce]

+1

[iwebd]

+1

[nsmithdev]

+1

[joedjc]

+1

[bennyadam]

+1

[maarten-vandevelde]

+1

[Asharma86]

This is a very important feature for dropdown component. Stacking context is big concern and a problem very hard to solve when working with complex data-grids and such. I loved it how I was able to use the popover component with such ease. If you could use the same utility here it will be awesome!

@pkozlowski-opensource +1

[jingzhang]

@adamk33n3r Sorry for the late reply. I was away on vacation. For me the import works just fine. I don't remember doing anything special.

Does you installation contain this file?
/node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts

If not, have you tried reinstalling ng-bootstrap?

[adamk33n3r]

@jingzhang Yes I have that file. It "imports" correctly. It's just that it's not compiling it to es5. It gets put into my bundle as es6 with imports and in Chrome it errors.

[jingzhang]

@adamk33n3r without seeing the actual code it's hard to guess the issue. But I think my project is also complied into es6 (not sure if the correct way to call it. I'm not really an expert in typescript).

BTW, my project was created with angular CLI, if yours wasn't, maybe it has something to do with the error.

Sorry I couldn't be of much help.

[lostip]

@adamk33n3r RE:

"The content child of NgbDropdownMenu is undefined"

check if you have properly added NgbDropdownModule to your module imports

[certainlyakey]

I am having trouble with the @jingzhang solution on ng-bootstrap 3.0.0. I've copied the code as a new directive, imported this directive in the app.module.ts and put it there in the declarations section. l also have tried to fix some path issues arising on build in terminal. However the browser (Chrome) displays a No provider for NgbDropdown error. What could be the problem?

import {
  Directive, ContentChild, AfterContentInit, ElementRef, OnDestroy,
  Inject, forwardRef
} from '@angular/core';
import { NgbDropdownMenu, NgbDropdown } from '@ng-bootstrap/ng-bootstrap/esm5/dropdown/dropdown';
import { positionElements } from '@ng-bootstrap/ng-bootstrap/esm5/util/positioning';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[ngbDropdown][ngbDropdownReposition]',
})
export class HcNgbDropdownRepositionDirective implements AfterContentInit, OnDestroy {

  @ContentChild(NgbDropdownMenu) private menu: NgbDropdownMenu;
  @ContentChild(NgbDropdownMenu, {read: ElementRef}) private menuRef: ElementRef;


  private oldParent: HTMLElement | null;
  private menuWrapper: HTMLElement;
  private readonly onChangeSubscription: Subscription;

  constructor(
    @Inject(forwardRef(() => NgbDropdown)) private dropdown: NgbDropdown,
    private elementRef: ElementRef
  ) {
    this.onChangeSubscription = this.dropdown.openChange.subscribe((open: boolean) => {
      if (!open) {
        setTimeout(() => this.removeMenuFromBody(), 0);
      }
    });
  }

  ngAfterContentInit() {
    this.oldParent = (<HTMLElement> this.menuRef.nativeElement).parentElement;
    this.createWrapper();
    this.menu.position = (triggerEl: HTMLElement, placement: string) => {
      this.setWrapperWidth();

      if (!this.isInBody()) {
        this.appendMenuToBody();
      }

      positionElements(triggerEl, this.menuWrapper, placement, true);
      this.menu.applyPlacement(positionElements(triggerEl, this.menuRef.nativeElement, placement));
    };
  }

  ngOnDestroy() {
    this.removeMenuFromBody();
    if (this.onChangeSubscription) {
      this.onChangeSubscription.unsubscribe();
    }
  }

  private isInBody() {
    return this.menuWrapper.parentNode === document.body;
  }

  private removeMenuFromBody() {
    if (this.isInBody()) {
      if (this.oldParent) {
        this.oldParent.appendChild(this.menuWrapper);
      }
    }
  }

  private appendMenuToBody() {
    window.document.body.appendChild(this.menuWrapper);
  }

  private createWrapper() {
    this.menuWrapper = document.createElement('div');
    this.menuWrapper.style.position = 'absolute';
    this.menuWrapper.style.zIndex = '1030';

    this.menuWrapper.addEventListener('keyup', (event: KeyboardEvent) => {
      if (event.keyCode === 27) {
        this.dropdown.closeFromOutsideEsc();
      }
    });
    this.menuWrapper.appendChild(this.menuRef.nativeElement);
  }

  private setWrapperWidth() {
    const parentEl = <HTMLElement> this.elementRef.nativeElement;
    this.menuWrapper.style.width = parentEl.clientWidth + 'px';
  }
}

[jingzhang]

@certainlyakey are you sure you upgraded to 3.0.0? Because dropdown.closeFromOutsideEsc() method no longer exists in this version (you can just remove the event listener on menuWrapper)

[certainlyakey]

Yes, npm list @ng-bootstrap/ng-bootstrap confirms that the version installed is 3.0.0. I have removed the listener just in case, it didn't help much.

[jingzhang]

OK, that's strange. I asked because with closeFromOutsideEsc in the code it shouldn't even compile. Anyway, I suspect it's due to the way you worked around the path issues. I see this at the top of your code:

import { NgbDropdownMenu, NgbDropdown } from '@ng-bootstrap/ng-bootstrap/esm5/dropdown/dropdown';
import { positionElements } from '@ng-bootstrap/ng-bootstrap/esm5/util/positioning';

I had similar import issues after upgrading to 3.0.0. What I did was:

import { NgbDropdown, ɵl as NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap';
import { positionElements } from '../ngb/positioning';

Notice that you need to make a local copy of the positioning service, because it's no longer exported in 3.0.0. You can grab it from here: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/positioning.ts I saved it at /src/app/ngb/positioning.ts, hence the path above

[certainlyakey]

Thanks @jingzhang! It works now. Apparently there were some problems with import paths indeed which strangely weren't reported by Typescript on build.

I've made an only change of modifying a single line in positionElements method in the positioning service that comes from ng-bootstrap (see the changed file). There was a problem with dropdowns incorrectly offset by the height of the host element. The top position for the target element inside its wrapper should not be the same as for the wrapper itself (since the target is positioned relative to the wrapper, and the wrapper is positioned relative to body).

Thanks again for the help!

[jingzhang]

NP @certainlyakey And thanks for sharing the fix 👍 I didn't notice that

[Nness]

In release 3.1, NgbDropdownMenu is export as ep.

// ng-bootstrap.d.ts
export { NgbDropdownAnchor as ɵq, NgbDropdownMenu as ɵp, NgbDropdownToggle as ɵr } from './dropdown/dropdown';

Code should change to
import { NgbDropdown, ɵp as NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap';

[bluecaret]

This workaround breaks tab navigation and accessibility. We still very much need an official solution. Can't believe this is still not a thing.

[olgabelous]

We use bootstrap 3.2 and use custom directive. Maybe it'll help someone.

import { Directive, forwardRef, Inject, OnDestroy } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';
import { positionElements } from '../positioning';

@Directive({
    selector: '[ngbDropdown][appDropdownAppendToBody]'
})
export class DropdownAppendToBodyDirective implements OnDestroy {

    private onChangeSubscription: Subscription;

    constructor(@Inject(forwardRef(() => NgbDropdown)) private dropdown: NgbDropdown) {

        this.onChangeSubscription = this.dropdown.openChange.subscribe((open: boolean) => {
            this.dropdown['_menu'].position = (triggerEl: HTMLElement, placement: string) => {
                if (!this.isInBody()) {
                    this.appendMenuToBody();
                }
                positionElements(triggerEl, this.dropdown['_menu']['_elementRef'].nativeElement, placement, true);
            };

            if (open) {
                if (!this.isInBody()) {
                    this.appendMenuToBody();
                }
            } else {
                setTimeout(() => this.removeMenuFromBody());
            }
        });
    }

    ngOnDestroy() {
        this.removeMenuFromBody();
        if (this.onChangeSubscription) {
            this.onChangeSubscription.unsubscribe();
        }
    }

    private isInBody() {
        return this.dropdown['_menu']['_elementRef'].nativeElement.parentNode === document.body;
    }

    private removeMenuFromBody() {
        if (this.isInBody()) {
            window.document.body.removeChild(this.dropdown['_menu']['_elementRef'].nativeElement);
        }
    }

    private appendMenuToBody() {
        window.document.body.appendChild(this.dropdown['_menu']['_elementRef'].nativeElement);
    }
}

<div ngbDropdown appDropdownAppendToBody  [placement]="['bottom-right', 'top-right']">
    <button ngbDropdownToggle></button>
    <div ngbDropdownMenu>
        ..
    </div>
</div>

We had to move positioning.ts to out app because it wasn't compiled.

[theCrius]

Using bootstrap 4 and related ngBootstrap, still no support for this. Maybe make this an higher priority after 2 years of this issue being open?

We have come up with a custom directive to reposition the ngbDropdown menu under the body element instead.

Here is the directive code:

[...]
export class DropdownPositionDirective implements AfterContentInit, OnDestroy {
[...]

And use it like this:

<div ngbDropdown ngbDropdownReposition>
 <!-- Rest of the dropdown code -->
</div>

Hope it helps :)

This solution works in putting the div under body but make attributes of the original directive not work anymore. Specifically placement don't work.

Also the div don't follow the button anymore if you scroll the page, it stay in the place it has opened (which is a problem shared by the original NgbTooltip directive so, not really an issue with the code that the good @mcorcuera provided.

[jrmsamson]

We use bootstrap 3.2 and use custom directive. Maybe it'll help someone.

import { Directive, forwardRef, Inject, OnDestroy } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';
import { positionElements } from '../positioning';

@Directive({
    selector: '[ngbDropdown][appDropdownAppendToBody]'
})
export class DropdownAppendToBodyDirective implements OnDestroy {

    private onChangeSubscription: Subscription;

    constructor(@Inject(forwardRef(() => NgbDropdown)) private dropdown: NgbDropdown) {

        this.onChangeSubscription = this.dropdown.openChange.subscribe((open: boolean) => {
            this.dropdown['_menu'].position = (triggerEl: HTMLElement, placement: string) => {
                if (!this.isInBody()) {
                    this.appendMenuToBody();
                }
                positionElements(triggerEl, this.dropdown['_menu']['_elementRef'].nativeElement, placement, true);
            };

            if (open) {
                if (!this.isInBody()) {
                    this.appendMenuToBody();
                }
            } else {
                setTimeout(() => this.removeMenuFromBody());
            }
        });
    }

    ngOnDestroy() {
        this.removeMenuFromBody();
        if (this.onChangeSubscription) {
            this.onChangeSubscription.unsubscribe();
        }
    }

    private isInBody() {
        return this.dropdown['_menu']['_elementRef'].nativeElement.parentNode === document.body;
    }

    private removeMenuFromBody() {
        if (this.isInBody()) {
            window.document.body.removeChild(this.dropdown['_menu']['_elementRef'].nativeElement);
        }
    }

    private appendMenuToBody() {
        window.document.body.appendChild(this.dropdown['_menu']['_elementRef'].nativeElement);
    }
}

<div ngbDropdown appDropdownAppendToBody  [placement]="['bottom-right', 'top-right']">
    <button ngbDropdownToggle></button>
    <div ngbDropdownMenu>
        ..
    </div>
</div>

We had to move positioning.ts to out app because it wasn't compiled.

I just copied your code and everything works fine.

Good job

Thanks :)

[lasantha57]

I guess same exists for the ngb-datepicker as well

[umdstu]

Most angular 2+ components I've seen/used have an appendToBody=true/false option that appends the dropdown to the body and fixes all of this. The old ui-bootstrap has this. Why isn't this an option?

[Maximaximum]

Quite a pity that this issue hasn't yet received an official fix :(

[fbasso]

Regarding the ngb-datepicker, the attribute container="body" can be used on the input.
See https://ng-bootstrap.github.io/#/components/datepicker/api#NgbInputDatepicker

[skorunka]

Facing some issue when parent div overflow is set to auto(or similar).

[lexeek]

Any progress with this issue?

[Apee]

Any progress... ?

[arajay]

@EvaSky workaround is working for me. if you don't update from version 2 the positioning util is not private and you can import it. otherwise you have to make a copy in your app (which sucks)

[Maximaximum]

Very pity that this issue does not seem to be of any priority to the team :(

[mikhailbartashevich]

Agree it's very pitty, please add this input