Fix bug with overflow in full screen modall

utils/modal/full-screen-modal/full-screen-modal.component.ts

@@ -1,15 +1,27 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
+import {
+  AfterViewInit, ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter, HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from "@angular/core";
 import {fromEvent, Subscription} from 'rxjs';
 import {delay} from "rxjs/operators";
 import {HelperFunctions} from "../../HelperFunctions.class";
 
 declare var UIkit;
+declare var ResizeObserver;
+
 @Component({
   selector: 'fs-modal',
   template: `
-    <div #element class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
+    <div #modal class="uk-modal-full" [id]="id" uk-modal="container: #modal-container">
       <div class="uk-modal-dialog">
-        <div class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
+        <div #header class="uk-modal-header uk-flex uk-flex-middle" [ngClass]="classTitle">
           <div [class.uk-invisible]="!back" class="uk-width-medium@l uk-width-auto uk-flex uk-flex-center">
             <button class="uk-button uk-button-link" [disabled]="!back" (click)="cancel()">
               <icon name="west" [flex]="true" ratio="3"></icon>
@@ -29,7 +41,7 @@ declare var UIkit;
             </button>
           </div>
         </div>
-        <div class="uk-modal-body" uk-overflow-auto>
+        <div #body class="uk-modal-body uk-overflow-auto"  [ngStyle]="{'height.px': bodyHeight}">
           <div class="uk-container uk-height-1-1" [ngClass]="classBody">
             <ng-content></ng-content>
           </div>
@@ -38,7 +50,7 @@ declare var UIkit;
     </div>
   `
 })
-export class FullScreenModalComponent {
+export class FullScreenModalComponent implements AfterViewInit, OnDestroy {
   @Input() id: string = "fs-modal";
   @Input() classTitle: string = "uk-background-primary uk-light";
   @Input() classBody: string = 'uk-container-large';
@@ -52,19 +64,57 @@ export class FullScreenModalComponent {
   okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output()
   cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
-	@ViewChild('element') element: ElementRef;
+	@ViewChild('modal') modal: ElementRef;
+  @ViewChild('header') header: ElementRef;
+  @ViewChild('body') body: ElementRef;
+  observer: any;
+  headerHeight: number;
+  bodyHeight: number;
+  
+  constructor(private cdr: ChangeDetectorRef) {
+  }
+  
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.changeHeight();
+  }
+  
+  ngAfterViewInit() {
+    if(typeof window !== "undefined") {
+      this.observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          this.changeHeight();
+        }
+      });
+      this.observer.observe(this.header.nativeElement);
+    }
+  }
+  
+  /* Height = Viewport - header - (Body padding) */
+  changeHeight() {
+    if(typeof window !== "undefined" && this.header) {
+      this.bodyHeight = window.innerHeight - this.header.nativeElement.clientHeight - 80;
+      this.cdr.detectChanges();
+    }
+  }
+  
+  ngOnDestroy() {
+    if(this.observer instanceof ResizeObserver) {
+      this.observer.disconnect();
+    }
+  }
   
   get isOpen() {
-    return this.element && UIkit.modal(this.element.nativeElement).isToggled();
+    return this.modal && UIkit.modal(this.modal.nativeElement).isToggled();
   }
   
   open() {
-    UIkit.modal(this.element.nativeElement).show();
+    UIkit.modal(this.modal.nativeElement).show();
     HelperFunctions.scroll();
   }
   
   cancel() {
-		UIkit.modal(this.element.nativeElement).hide();
+		UIkit.modal(this.modal.nativeElement).hide();
     HelperFunctions.scroll();
     this.cancelEmitter.emit();
   }