From 01e2a9841a981d2dea454de1f67e849e2f2dc71d Mon Sep 17 00:00:00 2001
From: Sangwoo Lee <marchpig87@gmail.com>
Date: Fri, 16 Dec 2016 01:27:49 +0900
Subject: [PATCH] Fix action bar layout broken issue

---
 zeppelin-web/src/app/notebook/notebook.controller.js | 5 +++++
 zeppelin-web/src/app/notebook/notebook.css           | 2 +-
 zeppelin-web/src/app/notebook/notebook.html          | 4 ++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/notebook.controller.js b/zeppelin-web/src/app/notebook/notebook.controller.js
index 8bec1aa2894..09d1878102b 100644
--- a/zeppelin-web/src/app/notebook/notebook.controller.js
+++ b/zeppelin-web/src/app/notebook/notebook.controller.js
@@ -910,6 +910,11 @@
       document.removeEventListener('click', $scope.focusParagraphOnClick);
       document.removeEventListener('keydown', $scope.keyboardShortcut);
     });
+
+    angular.element(window).bind('resize', function() {
+      const actionbarHeight = document.getElementById('actionbar').lastElementChild.clientHeight;
+      angular.element(document.getElementById('content')).css('padding-top', actionbarHeight - 20);
+    });
   }
 
 })();
diff --git a/zeppelin-web/src/app/notebook/notebook.css b/zeppelin-web/src/app/notebook/notebook.css
index 1f78a7e5578..8c48528b49d 100644
--- a/zeppelin-web/src/app/notebook/notebook.css
+++ b/zeppelin-web/src/app/notebook/notebook.css
@@ -133,7 +133,7 @@
   position: fixed;
   top: 50px;
   width: 100%;
-  height: 54px;
+  min-height: 54px;
   z-index: 10001;
 }
 
diff --git a/zeppelin-web/src/app/notebook/notebook.html b/zeppelin-web/src/app/notebook/notebook.html
index 9717ba0016b..78a556b6f30 100644
--- a/zeppelin-web/src/app/notebook/notebook.html
+++ b/zeppelin-web/src/app/notebook/notebook.html
@@ -12,8 +12,8 @@
 limitations under the License.
 -->
 <!-- Here the controller <NotebookCtrl> is not needed because explicitly set in the app.js (route) -->
-<div ng-include src="'app/notebook/notebook-actionBar.html'"></div>
-<div class="notebookContent">
+<div id="actionbar" ng-include src="'app/notebook/notebook-actionBar.html'"></div>
+<div id="content" class="notebookContent">
   <!-- settings -->
   <div ng-if="showSetting" class="setting">
     <div>