fixup

Author: splincode

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table/directives/auto-height.directive.ts

@@ -16,7 +16,7 @@ import { delay, takeUntil } from 'rxjs/operators';
 import { TABLE_GLOBAL_OPTIONS } from '../config/table-global-options';
 import { TableRow } from '../interfaces/table-builder.external';
 import { Any, BoxView, DynamicHeightOptions } from '../interfaces/table-builder.internal';
-import { HEAD_TOP, SCROLLBAR_WIDTH } from '../symbols';
+import { BORDER_TOB_WITH_BOTTOM, HEAD_TOP, SCROLLBAR_WIDTH } from '../symbols';
 
 const DELAY: number = 100;
 const MIN_RESIZE_DELAY: number = 200;
@@ -57,7 +57,7 @@ export class AutoHeightDirective implements OnInit, OnChanges, OnDestroy {
             if (this.useOnlyAutoViewPort && this.columnHeight > this.parentOffsetHeight) {
                 height = this.getHeightByViewPort({ paddingTop, paddingBottom });
             } else if (this.parentOffsetHeight > this.columnHeight) {
-                height = this.getDefaultHeight();
+                height = this.getDefaultHeight(this.parentOffsetHeight);
             } else if (this.isNotEmptyParentHeight) {
                 height = this.getHeightByParent({ paddingTop, paddingBottom });
             } else {
@@ -73,7 +73,7 @@ export class AutoHeightDirective implements OnInit, OnChanges, OnDestroy {
     }
 
     private get parentOffsetHeight(): number {
-        return this.rootCurrentElement.clientHeight || this.minHeight;
+        return (this.rootCurrentElement.clientHeight || this.minHeight) - this.scrollbarHeight - BORDER_TOB_WITH_BOTTOM;
     }
 
     private get currentElement(): HTMLDivElement {
@@ -93,9 +93,11 @@ export class AutoHeightDirective implements OnInit, OnChanges, OnDestroy {
     }
 
     private get scrollbarHeight(): number {
-        return this.sourceRef.length === 1
-            ? SCROLLBAR_WIDTH
-            : this.tableViewport.offsetHeight - this.tableViewport.clientHeight || 0;
+        const scrollHeight: number =
+            this.sourceRef.length === 1
+                ? SCROLLBAR_WIDTH
+                : this.tableViewport.offsetHeight - this.tableViewport.clientHeight || 0;
+        return scrollHeight + BORDER_TOB_WITH_BOTTOM;
     }
 
     private get headerHeight(): number {
@@ -171,8 +173,14 @@ export class AutoHeightDirective implements OnInit, OnChanges, OnDestroy {
         }
     }
 
-    private getDefaultHeight(): string {
-        return `calc(${this.columnHeight + this.scrollbarHeight + this.headerHeight + this.footerHeight}px)`;
+    private getDefaultHeight(parentHeight?: number): string {
+        let height: number = this.columnHeight + this.scrollbarHeight + this.headerHeight + this.footerHeight;
+
+        if (parentHeight) {
+            height = height > parentHeight ? parentHeight : height;
+        }
+
+        return `calc(${height}px)`;
     }
 
     private getHeightByParent({ paddingTop, paddingBottom }: BoxView): string {
@@ -182,7 +190,6 @@ export class AutoHeightDirective implements OnInit, OnChanges, OnDestroy {
 
     private getHeightByViewPort({ paddingTop, paddingBottom }: BoxView): string {
         const viewportHeight: number = this.autoViewHeight - parseInt(HEAD_TOP);
-
         return this.columnHeight > viewportHeight
             ? `calc(${viewportHeight}px - ${paddingTop} - ${paddingBottom} - ${this.scrollbarHeight}px)`
             : this.getDefaultHeight();

projects/table-builder/src/lib/table/symbols.ts

@@ -1,4 +1,5 @@
 export const SCROLLBAR_WIDTH: number = 12;
 export const HEAD_TOP: string = '10px';
+export const BORDER_TOB_WITH_BOTTOM: number = 2;
 export const MIN_PADDING_CONTEXT_ITEM: number = 25;
 export const OVERLOAD_WIDTH_TABLE_HEAD_CELL: number = 90;

projects/table-builder/src/lib/tests/directives/auto-height.directive.spec.ts

@@ -78,7 +78,7 @@ describe('[TEST]: auto height', () => {
         directive.recalculateTableSize();
         tick(100);
 
-        expect(style).toEqual(`display: block; height: calc(57px)`); // 45px + 12px (scrollbar height)
+        expect(style).toEqual(`display: block; height: calc(59px)`); // 45px + 12px + 2px boarding (scrollbar height)
     }));
 
     it('should be correct calculate auto height when columnHeight = 2000px', fakeAsync(() => {
@@ -87,7 +87,7 @@ describe('[TEST]: auto height', () => {
         directive.recalculateTableSize();
         tick(100);
 
-        expect(style).toEqual(`display: block; height: calc(980px - 0px - 0px - 12px)`);
+        expect(style).toEqual(`display: block; height: calc(980px - 0px - 0px - 14px)`);
     }));
 
     it('should be correct hide height not in viewport', () => {

src/app/samples/sample-first/sample-first.component.ts

@@ -14,7 +14,6 @@ export class SampleFirstComponent implements OnInit, OnDestroy {
     public width: string = '100%';
     public height: number;
     public rowHeight: string;
-    public columnWidth: string;
     public dataSize: string = '100x20';
     public loading: boolean = false;
     public simple: TableRow[] = [];