FEATURE: Dynamically calculate the height of search box to accomodate small data sets and different screen sizes.

DynamicBibleIonic/src/components/strongs/strongs.scss

@@ -47,7 +47,7 @@ strongs {
 @media screen and (min-width: 750px) {
     strongs {
         ion-scroll {
-            height: 400px;
+            height: 250px;
         }
 
         .strongs-def {

DynamicBibleIonic/src/components/words/words.scss

@@ -64,7 +64,7 @@
         }
 
         ion-scroll {
-            height: 300px;
+            height: 275px;
         }
     }
 }
@@ -76,7 +76,7 @@
         }
 
         ion-scroll {
-            height: 350px;
+            height: 275px;
         }
     }
 }
@@ -88,7 +88,7 @@
         }
 
         ion-scroll {
-            height: 350px;
+            height: 300px;
         }
     }
 }
@@ -100,7 +100,7 @@
         }
 
         ion-scroll {
-            height: 350px;
+            height: 300px;
         }
     }
 }

DynamicBibleIonic/src/components/words/words.ts

@@ -1,4 +1,5 @@
-import { EventEmitter, Component, Input, Output } from "@angular/core";
+/// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
+import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked } from "@angular/core";
 import { Reference } from '../../libs/Reference';
 import { OpenData, CardItem } from "../../pages/search/search";
 
@@ -6,7 +7,7 @@ import { OpenData, CardItem } from "../../pages/search/search";
     selector: "words",
     templateUrl: "words.html"
 })
-export class Words
+export class Words implements AfterViewChecked
 {
     @Output()
     onClose = new EventEmitter<CardItem>();
@@ -17,10 +18,69 @@ export class Words
     @Input()
     cardItem: CardItem;
 
+    $: any;
+
     constructor()
     {
     }
 
+    @HostListener('window:resize', ['$event'])
+    onResize(evt)
+    {
+        $("words ion-scroll").each((i, el) =>
+        {
+            let wr = $(el).find(".scroll-content .scroll-zoom-wrapper")[0];
+            let len = $(el).find(".scroll-zoom-wrapper a").length;
+
+            if (wr.scrollWidth < 500) // 1 col
+            {
+                if (len < 6) // 5 rows
+                    $(el).css("height", len * 44.4 + 25);
+                else
+                    $(el).css("height", 250);
+            }
+            else if (wr.scrollWidth < 699) // 2 col
+            {
+                if (len < 13) // 6 rows
+                    $(el).css("height", Math.ceil(len / 2) * 44.4 + 25);
+                else
+                    $(el).css("height", 300);
+            }
+            else if (wr.scrollWidth < 799) // 3 col
+            {
+                if (len < 22) // 7 rows
+                    $(el).css("height", Math.ceil(len / 3) * 44.4 + 25);
+                else
+                    $(el).css("height", 350);
+            }
+            else if (wr.scrollWidth < 899) // 4 col
+            {
+                if (len < 29) // 7 rows
+                    $(el).css("height", Math.ceil(len / 4) * 44.4 + 25);
+                else
+                    $(el).css("height", 350);
+            }
+            else if (wr.scrollWidth < 1199) // 5 col
+            {
+                if (len < 41) // 8 rows
+                    $(el).css("height", Math.ceil(len / 5) * 44.4 + 25);
+                else
+                    $(el).css("height", 400);
+            }
+            else // 6 col
+            {
+                if (len < 49) // 8 rows
+                    $(el).css("height", Math.ceil(len / 6) * 44.4 + 25);
+                else
+                    $(el).css("height", 400);
+            }
+        });
+    }
+    public ngAfterViewChecked(): void
+    {
+        this.onResize(null);
+    }
+
     close()
     {
         this.onClose.emit(this.cardItem);

DynamicBibleIonic/src/pages/search/search.scss

@@ -1,7 +1,6 @@
 .search-card {
     p {
         margin: 1em 0;
-        line-height: 1em;
         font-size: 1em;
     }