diff --git a/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java b/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
index b82072d959..228fcd0527 100644
--- a/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
+++ b/android/KMAPro/kMAPro/src/main/java/com/keyman/android/SystemKeyboard.java
@@ -155,8 +155,9 @@ public class SystemKeyboard extends InputMethodService implements OnKeyboardEven
     if (inputView != null)
       inputViewHeight = inputView.getHeight();
 
+    int bannerHeight = KMManager.getBannerHeight(this);
     int kbHeight = KMManager.getKeyboardHeight(this);
-    outInsets.contentTopInsets = inputViewHeight - kbHeight;
+    outInsets.contentTopInsets = inputViewHeight - bannerHeight - kbHeight;
     outInsets.touchableInsets = InputMethodService.Insets.TOUCHABLE_INSETS_REGION;
     outInsets.touchableRegion.set(0, outInsets.contentTopInsets, size.x, size.y);
   }
diff --git a/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java b/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
index 2071569fe6..47c295774f 100644
--- a/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
+++ b/android/KMAPro/kMAPro/src/main/java/com/tavultesoft/kmapro/MainActivity.java
@@ -420,9 +420,12 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
   }
 
   private void resizeTextView(boolean isKeyboardVisible) {
+    int bannerHeight = 0;
     int keyboardHeight = 0;
-    if (isKeyboardVisible)
+    if (isKeyboardVisible) {
+      bannerHeight = KMManager.getBannerHeight(this);
       keyboardHeight = KMManager.getKeyboardHeight(this);
+    }
 
     TypedValue outValue = new TypedValue();
     getTheme().resolveAttribute(android.R.attr.actionBarSize, outValue, true);
@@ -437,7 +440,8 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
     Point size = new Point(0, 0);
     getWindowManager().getDefaultDisplay().getSize(size);
     int screenHeight = size.y;
-    textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - keyboardHeight);
+    Log.d(TAG, "Main resizeTextView bannerHeight: " + bannerHeight);
+    textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - bannerHeight - keyboardHeight);
   }
 
   private void showInfo() {
diff --git a/android/KMEA/app/src/main/assets/keyboard.html b/android/KMEA/app/src/main/assets/keyboard.html
index cfcdb5aced..c5a61db4fb 100644
--- a/android/KMEA/app/src/main/assets/keyboard.html
+++ b/android/KMEA/app/src/main/assets/keyboard.html
@@ -10,6 +10,7 @@
   <script src="keyman.js"></script>
   <script type="text/javascript">
     var device = window.jsInterface.getDeviceType();
+    var bannerHeight = window.jsInterface.getBannerHeight();
     var oskHeight = window.jsInterface.getKeyboardHeight();
     var oskWidth = 0;
     window.addEventListener('load', init, false);
@@ -18,18 +19,20 @@
       //document.body.style.backgroundColor="transparent";
       //window.console.log('Device type = '+device);
       //window.console.log('Keyboard height = '+oskHeight);
-      var kmw=window['keyman'];
+      var kmw=com.keyman.singleton;
       kmw.init({'app':device,'fonts':'packages/'});
       kmw['util']['setOption']('attachType','manual');
       kmw['oninserttext'] = insertText;
       kmw['showKeyboardList'] = showMenu;
       kmw['hideKeyboard'] = hideKeyboard;
+      kmw['getBannerHeight'] = getBannerHeight;
       kmw['getOskHeight'] = getOskHeight;
       kmw['getOskWidth'] = getOskWidth;
       kmw['beepKeyboard'] = beepKeyboard;
       var ta = document.getElementById('ta');
       kmw['setActiveElement'](ta);
 
+      setBanner('blank');
       ta.readOnly = false;
 
       kmw.addEventListener('keyboardloaded', setIsChiral);
@@ -42,6 +45,11 @@
       }
       var kmw=window['keyman'];
       kmw['correctOSKTextSize']();
+      window.console.log('Embedded done with correctOSKTextSize');
+    }
+
+    function getBannerHeight() {
+      return bannerHeight;
     }
 
     function setOskWidth(w) {
@@ -51,6 +59,7 @@
     }
 
     function getOskHeight() {
+      window.console.log('Embedded getOskHeight: '+oskHeight);
       return oskHeight;
     }
 
@@ -124,6 +133,15 @@
     function insertText(dn, s) {
       //window.console.log('insertText('+ dn +', ' + s +');');
       window.jsInterface.insertText(dn, s);
+
+      // TODO: Remove for production: Testing
+      var kmw=com.keyman.singleton;
+      if (s == 'b') {
+        setBanner('blank');
+      } else if (s == 's') {
+        setBanner('suggestion');
+        kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
+      }
     }
 
     function registerModel(model) {
@@ -207,6 +225,28 @@
       window.location.hash = 'hideKeyboard' + fragmentToggle;
     }
 
+    function setBanner(bannerType) {
+      var kmw = com.keyman.singleton;
+      var banner = kmw.osk.banner;
+      if (bannerType == 'blank') {
+        banner.setOptions({
+          'persistentBanner': false,
+          'enablePredictions': false
+        });
+        banner.setBanner('blank');
+      } else if (bannerType == 'suggestion') {
+        banner.setOptions({
+          'persistentBanner': true,
+          'enablePredictions': true
+        });
+        banner.setBanner('suggestion', bannerHeight);
+
+        // TODO: Remove for production. For testing integration of suggestion banner
+        window.console.log('Embedded setBanner to ' + bannerHeight);
+        kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'alpha'}, {displayAs: 'bravo'}, {displayAs: 'charlie'}]);
+      }
+    }
+
     function showHelpBubble() {
       fragmentToggle = (fragmentToggle + 1) % 100;
       var kmw = window['keyman'];
diff --git a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
index d766105f9f..07a1280e61 100644
--- a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
+++ b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMKeyboardJSHandler.java
@@ -25,6 +25,14 @@ public abstract class KMKeyboardJSHandler {
     return context.getResources().getString(R.string.device_type);
   }
 
+  // This annotation is required in Jelly Bean and later:
+  @JavascriptInterface
+  public int getBannerHeight() {
+    int bannerHeight = context.getResources().getDimensionPixelSize(R.dimen.banner_height);
+    //bannerHeight -= bannerHeight % 20;
+    return bannerHeight;
+  }
+
   // This annotation is required in Jelly Bean and later:
   @JavascriptInterface
   public int getKeyboardHeight() {
diff --git a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
index 6b1bb0c7e5..6b371a44c7 100644
--- a/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
+++ b/android/KMEA/app/src/main/java/com/tavultesoft/kmea/KMManager.java
@@ -104,6 +104,7 @@ public final class KMManager {
   protected static boolean SystemKeyboardShouldIgnoreSelectionChange = false;
   protected static KMKeyboard InAppKeyboard = null;
   protected static KMKeyboard SystemKeyboard = null;
+  protected static String currentBanner = "blank";
 
   // Keyman public keys
   public static final String KMKey_ID = "id";
@@ -234,12 +235,18 @@ public final class KMManager {
     return false;
   }
 
+  private static RelativeLayout.LayoutParams getKeyboardLayoutParams() {
+    int bannerHeight = currentBanner.equals("suggestion") ? getBannerHeight(appContext) : 0;
+    int kbHeight = getKeyboardHeight(appContext);
+    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
+    params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
+   return params;
+  }
+
   private static void initInAppKeyboard(Context appContext) {
     if (InAppKeyboard == null) {
-      int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
-      params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       InAppKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_INAPP);
+      RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
       InAppKeyboard.setLayoutParams(params);
       InAppKeyboard.setVerticalScrollBarEnabled(false);
       InAppKeyboard.setHorizontalScrollBarEnabled(false);
@@ -251,10 +258,8 @@ public final class KMManager {
 
   private static void initSystemKeyboard(Context appContext) {
     if (SystemKeyboard == null) {
-      int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
-      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
-      params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
       SystemKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_SYSTEM);
+      RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
       SystemKeyboard.setLayoutParams(params);
       SystemKeyboard.setVerticalScrollBarEnabled(false);
       SystemKeyboard.setHorizontalScrollBarEnabled(false);
@@ -668,14 +673,19 @@ public final class KMManager {
       return false;
     }
 
-    // Use single quotes in JSONobject for javascript call
+    // Escape single quotes, and then convert double quotes to single quotes for javascript call
     String model = String.valueOf(modelObj);
+    model = model.replaceAll("\'", "\\\\'"); // Double-escaped-backslash b/c regex.
     model = model.replaceAll("\"", "'");
 
+    currentBanner = "suggestion";
+    RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
     if (InAppKeyboard != null && InAppKeyboardLoaded && !InAppKeyboardShouldIgnoreTextChange) {
+      InAppKeyboard.setLayoutParams(params);
       InAppKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
     }
     if (SystemKeyboard != null && SystemKeyboardLoaded && !SystemKeyboardShouldIgnoreTextChange) {
+      SystemKeyboard.setLayoutParams(params);
       SystemKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
     }
     return true;
@@ -939,6 +949,10 @@ public final class KMManager {
     KMKeyboard.removeOnKeyboardEventListener(listener);
   }
 
+  public static int getBannerHeight(Context context) {
+    return (int) context.getResources().getDimension(R.dimen.banner_height);
+  }
+
   public static int getKeyboardHeight(Context context) {
     return (int) context.getResources().getDimension(R.dimen.keyboard_height);
   }
diff --git a/android/KMEA/app/src/main/res/values-land/dimens.xml b/android/KMEA/app/src/main/res/values-land/dimens.xml
index 5d20b97e5b..69aa65c705 100644
--- a/android/KMEA/app/src/main/res/values-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Phone) -->
 <resources>
+    <dimen name="banner_height">60dp</dimen>
     <dimen name="keyboard_height">205dp</dimen>
     <dimen name="key_width">49.25dp</dimen>
     <dimen name="key_height">49.25dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml b/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
index 0d9efd3708..286042ffec 100644
--- a/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Tablet 7") -->
 <resources>
+    <dimen name="banner_height">80dp</dimen>
     <dimen name="keyboard_height">305dp</dimen>
     <dimen name="key_width">73.5dp</dimen>
     <dimen name="key_height">58.5dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml b/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
index d716766e31..228d15cd86 100644
--- a/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw720dp-land/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Landscape (Tablet 10") -->
 <resources>
+    <dimen name="banner_height">90dp</dimen>
     <dimen name="keyboard_height">405dp</dimen>
     <dimen name="key_width">98.5dp</dimen>
     <dimen name="key_height">98.5dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml b/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
index 912f74b809..1f74b2462e 100644
--- a/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
+++ b/android/KMEA/app/src/main/res/values-sw720dp/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Default or Portrait (Tablet 10") -->
 <resources>
+    <dimen name="banner_height">90dp</dimen>
     <dimen name="keyboard_height">405dp</dimen>
     <dimen name="key_width">68.5dp</dimen>
     <dimen name="key_height">98.5dp</dimen>
diff --git a/android/KMEA/app/src/main/res/values/dimens.xml b/android/KMEA/app/src/main/res/values/dimens.xml
index 7dfbd8a441..f148bdeaf0 100644
--- a/android/KMEA/app/src/main/res/values/dimens.xml
+++ b/android/KMEA/app/src/main/res/values/dimens.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Dimens for Default or Portrait (Phone) -->
 <resources>
+    <dimen name="banner_height">60dp</dimen>
     <dimen name="keyboard_height">205dp</dimen>
     <dimen name="key_width">34.25dp</dimen>
     <dimen name="key_height">49.25dp</dimen>
diff --git a/web/package-lock.json b/web/package-lock.json
index 7d1c95809f..09dbdaa952 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1274,7 +1274,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1295,12 +1296,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1315,17 +1318,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1442,7 +1448,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1454,6 +1461,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1468,6 +1476,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1475,12 +1484,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -1499,6 +1510,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1579,7 +1591,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1591,6 +1604,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -1676,7 +1690,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -1712,6 +1727,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -1731,6 +1747,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -1774,12 +1791,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/web/source/kmwembedded.ts b/web/source/kmwembedded.ts
index 3e98bd613c..35079c9b31 100644
--- a/web/source/kmwembedded.ts
+++ b/web/source/kmwembedded.ts
@@ -130,10 +130,11 @@ namespace com.keyman.osk {
     if(device.OS == 'Android' && 'devicePixelRatio' in window) {
       rowHeight = rowHeight/window.devicePixelRatio;
     }
+    let bannerHeight : number = oskManager.getBannerHeight();
     let oskHeight : number = nRows*rowHeight;
 
     var b: HTMLElement = _Box, bs=b.style;
-    bs.height=bs.maxHeight=(oskHeight+3)+'px';
+    bs.height=bs.maxHeight=(bannerHeight+oskHeight+3)+'px';
     b = <HTMLElement> b.childNodes.item(1).firstChild;
     bs=b.style;
     bs.height=bs.maxHeight=(oskHeight+3)+'px';
@@ -358,7 +359,7 @@ namespace com.keyman.text {
    */
   keymanweb['registerModel']=function(model: com.keyman.text.prediction.ModelSpec) {
     keymanweb.modelManager.register(model);
-  }
+  };
 
   /**
    * Function called by iOS when a device-implemented keyboard popup is displayed or hidden
diff --git a/web/source/kmwnative.ts b/web/source/kmwnative.ts
index 9e4406a773..01c81d6ac1 100644
--- a/web/source/kmwnative.ts
+++ b/web/source/kmwnative.ts
@@ -651,6 +651,17 @@ if(!window['keyman']['initialized']) {
       rotationManager.init();
     }
 
+    /**
+     * Test code to set suggestion banner
+     * TODO: Remove from production
+     */
+    keymanweb['setBanner']=function() {
+      let keyman = com.keyman.singleton;
+      let osk = keyman.osk;
+      osk.banner.setBanner('suggestion');
+      osk.banner.setSuggestions();
+    };
+
     /**
      * Possible way to detect the start of a rotation and hide the OSK before it is adjusted in size
      * 
diff --git a/web/source/osk/banner.ts b/web/source/osk/banner.ts
index 686be9138a..7bb0e57af5 100644
--- a/web/source/osk/banner.ts
+++ b/web/source/osk/banner.ts
@@ -58,7 +58,7 @@ namespace com.keyman.osk {
       let util = keymanweb.util;
 
       let d = util._CreateElement('div');
-      d.id = "keymanweb_banner_bar";
+      d.id = "kmw-banner-bar";
       d.className = "kmw-banner-bar";
       this.div = d;
 
@@ -266,6 +266,11 @@ namespace com.keyman.osk {
 
       // TODO:  Dynamic suggestion text resizing.  (Refer to OSKKey.getTextWidth in visualKeyboard.ts.)
 
+      // TODO: Investigate the factor of "48"
+      let ss = s.style;
+      let oskManager = keyman.osk;
+      ss.top = oskManager.getBannerHeight() - 48 + 'px';
+
       // Finalize the suggestion text
       s.innerHTML = suggestionText;
       return s;
@@ -275,6 +280,7 @@ namespace com.keyman.osk {
   /**
    * Function     SuggestionBanner
    * Scope        Public
+   * @param {number} height - If provided, the height of the banner in pixels
    * Description  Display lexical model suggestions in the banner
    */
   export class SuggestionBanner extends Banner {
@@ -284,8 +290,8 @@ namespace com.keyman.osk {
     private suggestionList : BannerSuggestion[];
     private currentSuggestions: Suggestion[] = [];
 
-    constructor() {
-      super(SuggestionBanner.DEFAULT_HEIGHT);
+    constructor(height?: number) {
+      super(height);
       this.suggestionList = new Array();
       for (var i=0; i<SuggestionBanner.SUGGESTION_LIMIT; i++) {
         let d = new BannerSuggestion(i);
@@ -325,6 +331,7 @@ namespace com.keyman.osk {
           option.update(null);
         }
       });
+      console.log("updateSuggestions done");
     }.bind(this);
   }
 }
diff --git a/web/source/osk/bannerManager.ts b/web/source/osk/bannerManager.ts
index 361a3ace1c..63304dbdf9 100644
--- a/web/source/osk/bannerManager.ts
+++ b/web/source/osk/bannerManager.ts
@@ -173,8 +173,9 @@ namespace com.keyman.osk {
      * 
      * @param type `'blank' | 'image' | 'suggestion'` - A plain-text string 
      *        representing the type of `Banner` to set active.
+     * @param height - Optional banner height in pixels.
      */
-    public setBanner(type: BannerType) {
+    public setBanner(type: BannerType, height?: number) {
       switch(type) {
         case 'blank':
           this._setBanner(new BlankBanner());
@@ -183,7 +184,7 @@ namespace com.keyman.osk {
           this._setBanner(new ImageBanner(this.imagePath, ImageBanner.DEFAULT_HEIGHT));
           break;
         case 'suggestion':
-          this._setBanner(new SuggestionBanner());
+          this._setBanner(new SuggestionBanner(height));
           let keyman = com.keyman.singleton;
           let banner = this.activeBanner as SuggestionBanner;
           keyman.modelManager['addEventListener']('invalidatesuggestions', banner.invalidateSuggestions);
@@ -194,6 +195,17 @@ namespace com.keyman.osk {
       }
     }
 
+    // TODO: test code not to keep in production
+    public setSuggestions() {
+      let blank : Suggestion = {displayAs: 'blank'} as Suggestion;
+      let s:Array<Suggestion> = Array(blank, blank, blank);
+      s[0].displayAs = 'choco';
+      s[1].displayAs = 'taco';
+      s[2].displayAs = 'last';
+      let suggestionBanner = this.activeBanner as SuggestionBanner;
+      suggestionBanner.updateSuggestions(s);
+    }
+
     /**
      * Handles `ModelManager`'s `'modelchange'` events, 
      * allowing logic to automatically hot-swap `Banner`s as needed.
diff --git a/web/source/osk/oskManager.ts b/web/source/osk/oskManager.ts
index 98a7f80536..6bc47ee9b9 100644
--- a/web/source/osk/oskManager.ts
+++ b/web/source/osk/oskManager.ts
@@ -1303,7 +1303,7 @@ namespace com.keyman.osk {
           Ls.left=Ls.bottom='0px';
           let vkbdHeight = (<HTMLElement> this.vkbd.kbdDiv.firstChild).style.height;
           vkbdHeight = vkbdHeight.substr(0, vkbdHeight.indexOf('px'));
-          Ls.height=Ls.maxHeight= (parseInt(vkbdHeight, 10) + this.getBannerHeight()) + 'px';
+          Ls.height=Ls.maxHeight= (this.getBannerHeight() + parseInt(vkbdHeight, 10)) + 'px';
           Ls.border='none';
           Ls.borderTop='1px solid gray';
 
diff --git a/web/source/osk/visualKeyboard.ts b/web/source/osk/visualKeyboard.ts
index a9257d0e71..599a6abdb7 100644
--- a/web/source/osk/visualKeyboard.ts
+++ b/web/source/osk/visualKeyboard.ts
@@ -638,7 +638,7 @@ namespace com.keyman.osk {
       let bannerHeight = oskManager.banner.height;
       let rowsPercent = 100;
 
-      var lDiv=util._CreateElement('div'), ls=lDiv.style, actualHeight=0;
+      var lDiv=util._CreateElement('div'), ls=lDiv.style, totalHeight=0;
 
       // Set OSK box default style
       lDiv.className='kmw-key-layer-group';
@@ -647,9 +647,9 @@ namespace com.keyman.osk {
       switch(formFactor) {
         case 'phone':
         case 'tablet':
-          actualHeight=oskManager.getHeight();
-          ls.height=actualHeight+'px';
-          rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/actualHeight );
+          totalHeight=oskManager.getHeight();
+          ls.height=totalHeight+'px';
+          rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/totalHeight );
           break;
       }
 
diff --git a/web/source/resources/osk/kmwosk.css b/web/source/resources/osk/kmwosk.css
index acc983fb1b..f926d97196 100644
--- a/web/source/resources/osk/kmwosk.css
+++ b/web/source/resources/osk/kmwosk.css
@@ -49,9 +49,10 @@
 .phone.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
 .phone.ios .kmw-key.kmw-key-touched {background-color:#88f;}
 
-.phone.ios .kmw-banner-bar {background-color: #cfd3d9; height: 40px; width: 100%;}
-.phone.ios .kmw-banner-bar .kmw-suggest-option {background-color: #fdfdfe; display:inline-block; vertical-align: middle; border-radius: 5px;}
-.phone.ios .kmw-suggestion-text {color:#000; width: 100%; text-align: center;}
+.phone.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%;}
+.phone.ios .kmw-banner-bar .kmw-suggest-option {background-color: #cfd3d9; display:inline-block; text-align: center; border-radius: 5px;}
+.phone.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 .phone.android .kmw-key-layer-group {background-color: #333;}  
 .phone.android .kmw-key {border: none; border-bottom: solid 1px #8a8d90; box-shadow:none; border-radius: 3px;}
@@ -65,9 +66,9 @@
 .phone.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #bbb;}
 .phone.android .kmw-spacebar-caption {color: #aaa;}
 
-.phone.android .kmw-banner-bar {background-color: #222; height: 40px; width: 100%;}
-.phone.android .kmw-banner-bar .kmw-suggest-option {background-color: #333; display:inline-block; vertical-align: middle; border-radius: 5px}
-.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; text-align: center;}
+.phone.android .kmw-banner-bar {background-color: #222; display: inline-block; height: 100%; width: 100%;}
+.phone.android .kmw-banner-bar .kmw-suggest-option {background-color: #333; display:inline-block; text-align: center; height: 85%; border-radius: 5px;}
+.phone.android .kmw-suggestion-text {color:#fff; background-color: #222; line-height: normal; position: relative; vertical-align: middle;}
 
 .tablet.kmw-osk-frame{position:fixed;left:0;bottom:0;width:100%;height:144px;overflow-y:visible;
         background-color:rgba(0,0,0,0.8);-webkit-user-select:none;}
@@ -94,9 +95,10 @@
 .tablet.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
 .tablet.ios .kmw-key.kmw-key-touched {background-color:#88f;}
 
-.tablet.ios .kmw-banner-bar {background-color: #cfd3d9}
-.tablet.ios .kmw-banner-bar .kmw-suggest-option {background-color: #fdfdfe; display:inline-block; vertical-align:middle; border-radius: 5px;}
-.tablet.ios .kmw-suggestion-text {color:#000; text-align: center;}
+.tablet.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%;}
+.tablet.ios .kmw-banner-bar .kmw-suggest-option {background-color: #cfd3d9; display:inline-block; text-align: center; border-radius: 5px;}
+.tablet.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
+        line-height: normal; position: relative; vertical-align: middle;}
 
 .tablet .kmw-key-row {-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
 
@@ -112,9 +114,10 @@
 .tablet.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #777;}
 .tablet.android .kmw-spacebar-caption {color: #888;}         
 
-.tablet.android .kmw-banner-bar {background-color: #b4b4b8; height: 40px; width: 100%;}
-.tablet.android .kmw-banner-bar .kmw-suggest-option {background-color: #b4b4b8; display:inline-block; vertical-align: middle; border-radius: 5px}
-.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; text-align: center;}
+.tablet.android .kmw-banner-bar {background-color: #b4b4b8; display: inline-block; height: 100%; width: 100%;}
+.tablet.android .kmw-banner-bar .kmw-suggest-option {background-color: #b4b4b8; display:inline-block; text-align: center; border-radius: 5px;}
+.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; display: inline; height: 100%;
+        line-height: normal; postion: relative; vertical-align: middle;}
 
 /* Vertical centering of text labels on keys */ 
 .kmw-key {text-align:center; white-space:nowrap;}
@@ -155,11 +158,9 @@
 .kmw-title-bar-actions{position: absolute; cursor: default; right:2px; top:0; width: 33px; height: 13px;}
 .kmw-footer-caption{color:#fff;font:0.7em Arial;margin:0 0 0 4px;}
 
-.kmw-banner-container{width:100%; margin:0;}
-.kmw-banner-bar{height:40px; width:100%; margin:0; background-color:darkorange;}
-.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; vertical-align: middle; text-align: center; border-radius: 5px}
-.kmw-suggestion-text{color:#ffff; text-align: center; width: 95%}
-
+.kmw-banner-bar{height:100%; width:100%; margin:0; background-color:darkorange; display: inline-block;}
+.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; text-align: center; height: 85%; border-radius: 5px;}
+.kmw-suggestion-text{color:#fff; background-color: orange; line-height: normal; position: relative; vertical-align: middle;}
 
 .kmw-footer-resize{cursor:se-resize;position:absolute;right:2px;bottom:2px;width:16px;height:16px;overflow:hidden;
           font-family:SpecialOSK;color:white;}