Add max-height to modal content on window resize for ie11 bug (#567)

blackbaud · Apr 10, 2017 · dae4600 · dae4600
1 parent 44e3ee7
commit dae4600
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/modules/modal/modal-component-adapter.service.ts b/src/modules/modal/modal-component-adapter.service.ts
@@ -20,6 +20,15 @@ export class SkyModalComponentAdapterService {
     if (fullPageModalEl) {
       fullPageModalEl.style.height = window.innerHeight.toString() + 'px';
       fullPageModalEl.style.maxHeight = window.innerHeight.toString() + 'px';
+    } else {
+      /*
+        IE11 doesn't handle flex and max-height correctly so we have to explicitly add
+        max-height to the content that accounts for standard header and footer height.
+      */
+      let modalContentEl = modalEl.nativeElement.querySelector('.sky-modal-content');
+      let contentHeight = newHeight - 114;
+      modalContentEl.style.maxHeight = contentHeight.toString() + 'px';
+
     }
   }
 }
diff --git a/src/modules/modal/modal.component.spec.ts b/src/modules/modal/modal.component.spec.ts
@@ -94,8 +94,12 @@ describe('Modal component', () => {
     let modalEl = document.querySelector('.sky-modal');
     let maxHeight = parseInt(getComputedStyle(modalEl).maxHeight, 10);
     let windowHeight = window.innerHeight;
+    let contentEl = modalEl.querySelector('.sky-modal-content');
+
+    let contentHeight = parseInt(getComputedStyle(contentEl).maxHeight, 10);
 
     expect(maxHeight).toEqual(windowHeight - 40);
+    expect(contentHeight).toEqual(windowHeight - 40 - 114);
 
     TestUtility.fireDomEvent(window, 'resize');
     applicationRef.tick();