fix(datepicker): z-index set when appended to body

Fixes #3133
ng-bootstrap · Apr 30, 2019 · 00ee594 · 00ee594
1 parent b7c7934
commit 00ee594
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -749,6 +749,28 @@ describe('NgbInputDatepicker', () => {
       expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
       expect(document.querySelector(selector).querySelector('ngb-datepicker')).toBeNull();
     });
+
+    it('should add .ngb-dp-body class when attached to body', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker #d="ngbDatepicker" [container]="container">`);
+      const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+
+      // No container specified
+      dpInput.open();
+
+      let element = document.querySelector('ngb-datepicker') as HTMLElement;
+      expect(element).not.toBeNull();
+      expect(element).not.toHaveCssClass('ngb-dp-body');
+
+      // Body
+      dpInput.close();
+      fixture.componentInstance.container = 'body';
+      fixture.detectChanges();
+      dpInput.open();
+
+      element = document.querySelector('ngb-datepicker') as HTMLElement;
+      expect(element).not.toBeNull();
+      expect(element).toHaveCssClass('ngb-dp-body');
+    });
   });
 
   describe('Native adapter', () => {
@@ -803,6 +825,7 @@ class TestNativeComponent {
 
 @Component({selector: 'test-cmp', template: ''})
 class TestComponent {
+  container;
   date: NgbDateStruct;
   isDisabled;
 

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -407,6 +407,10 @@ export class NgbInputDatepicker implements OnChanges,
   private _applyPopupStyling(nativeElement: any) {
     this._renderer.addClass(nativeElement, 'dropdown-menu');
     this._renderer.addClass(nativeElement, 'show');
+
+    if (this.container === 'body') {
+      this._renderer.addClass(nativeElement, 'ngb-dp-body');
+    }
   }
 
   private _subscribeForDatepickerOutputs(datepickerInstance: NgbDatepicker) {

diff --git a/src/datepicker/datepicker.scss b/src/datepicker/datepicker.scss
@@ -13,6 +13,10 @@ ngb-datepicker {
 }
 
 .ngb-dp {
+  &-body {
+    z-index: 1050;
+  }
+
   &-header {
     border-bottom: 0;
     border-radius: .25rem .25rem 0 0;