From bb0ea78741b5576da09a87d90afeb0f600ad1ee1 Mon Sep 17 00:00:00 2001
From: Scott Aslan <jaslan@hortonworks.com>
Date: Mon, 27 Jun 2016 17:39:26 -0400
Subject: [PATCH] [NIFI-2027] Responsive Tables. This closes #577

---
 .../canvas/listing-request-status-dialog.jsp  |   2 +-
 .../canvas/new-controller-service-dialog.jsp  |   2 +-
 .../partials/canvas/new-processor-dialog.jsp  |   2 +-
 .../canvas/new-reporting-task-dialog.jsp      |   2 +-
 .../canvas/process-group-configuration.jsp    |  50 +++---
 .../WEB-INF/partials/canvas/queue-listing.jsp |   2 +-
 .../provenance/provenance-content.jsp         |   2 +-
 .../src/main/webapp/css/component-state.css   |  11 +-
 .../main/webapp/css/controller-service.css    |   2 +-
 .../src/main/webapp/css/counters.css          |  17 +-
 .../src/main/webapp/css/dialog.css            |   2 +-
 .../src/main/webapp/css/history.css           |  23 +--
 .../css/new-controller-service-dialog.css     |   2 +-
 .../main/webapp/css/new-processor-dialog.css  |   2 +-
 .../webapp/css/new-reporting-task-dialog.css  |   2 +-
 .../css/process-group-configuration.css       |  15 +-
 .../webapp/css/processor-configuration.css    |   2 +-
 .../src/main/webapp/css/provenance.css        | 106 ++++++-------
 .../src/main/webapp/css/queue-listing.css     | 148 ++++++++----------
 .../src/main/webapp/css/reporting-task.css    |   2 +-
 .../src/main/webapp/css/settings.css          |  22 +--
 .../nifi-web-ui/src/main/webapp/css/shell.css |   7 +-
 .../src/main/webapp/css/summary.css           |  16 +-
 .../src/main/webapp/css/templates.css         |  20 ++-
 .../propertytable/jquery.propertytable.css    |   2 +-
 .../slickgrid/css/slick-default-theme.css     |   8 +
 .../webapp/js/jquery/tabbs/jquery.tabbs.css   |  13 +-
 .../js/nf/bulletin-board/nf-bulletin-board.js |  37 +++--
 .../src/main/webapp/js/nf/canvas/nf-canvas.js |  13 +-
 .../webapp/js/nf/canvas/nf-queue-listing.js   |   5 +-
 .../webapp/js/nf/canvas/nf-reporting-task.js  |   4 +
 .../js/nf/counters/nf-counters-table.js       |   5 -
 .../main/webapp/js/nf/counters/nf-counters.js |  30 +++-
 .../webapp/js/nf/history/nf-history-model.js  |   4 +-
 .../webapp/js/nf/history/nf-history-table.js  |   7 +-
 .../main/webapp/js/nf/history/nf-history.js   |  29 +++-
 .../js/nf/provenance/nf-provenance-table.js   |   5 -
 .../webapp/js/nf/provenance/nf-provenance.js  |  32 +++-
 .../main/webapp/js/nf/summary/nf-summary.js   |  36 ++---
 .../js/nf/templates/nf-templates-table.js     |   5 -
 .../webapp/js/nf/templates/nf-templates.js    |  30 +++-
 41 files changed, 389 insertions(+), 337 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
index bed88a41cb..a0ac89c69a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/listing-request-status-dialog.jsp
@@ -15,7 +15,7 @@
   limitations under the License.
 --%>
 <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
-<div id="listing-request-status-dialog" layout="column" class="hidden large-dialog">
+<div id="listing-request-status-dialog" layout="column" class="hidden small-dialog">
     <div class="dialog-content">
         <div class="setting">
             <div class="setting-field">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
index 91b6a5ac2b..3777ca64c1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-controller-service-dialog.jsp
@@ -30,7 +30,7 @@
                 </div>
             </div>
         </div>
-        <div flex layout="row" style="padding-top:0">
+        <div flex layout="row" style="padding-top:0;height: 90%;">
             <div flex="25" id="controller-service-tag-cloud-container">
                 <div class="setting">
                     <div class="setting-field">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
index 90aa7c305e..22a1811b31 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-processor-dialog.jsp
@@ -31,7 +31,7 @@
                 </div>
             </div>
         </div>
-        <div flex layout="row" style="padding-top:0">
+        <div flex layout="row" style="padding-top:0;height: 90%;">
             <div flex="25" id="processor-tag-cloud-container">
                 <div class="setting">
                     <div class="setting-field">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
index bb75f21696..88df206cf4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp
@@ -30,7 +30,7 @@
                 </div>
             </div>
         </div>
-        <div flex layout="row" style="padding-top:0">
+        <div flex layout="row" style="padding-top:0;height: 90%;">
             <div flex="25" id="reporting-task-tag-cloud-container">
                 <div class="setting">
                     <div class="setting-name">Tags</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
index d4da03ece9..e94434f221 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
@@ -23,36 +23,34 @@
             <button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus"></button>
             <div class="clear"></div>
         </div>
-        <div>
-            <div id="general-process-group-configuration-tab-content" class="configuration-tab">
-                <div id="general-process-group-configuration">
-                    <div class="setting">
-                        <div class="setting-name">Process group name</div>
-                        <div class="editable setting-field">
-                            <input type="text" id="process-group-name" class="setting-input"/>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-name"></span>
-                        </div>
+        <div id="general-process-group-configuration-tab-content" class="configuration-tab">
+            <div id="general-process-group-configuration">
+                <div class="setting">
+                    <div class="setting-name">Process group name</div>
+                    <div class="editable setting-field">
+                        <input type="text" id="process-group-name" class="setting-input"/>
                     </div>
-                    <div class="setting">
-                        <div class="setting-name">Process group comments</div>
-                        <div class="editable setting-field">
-                            <textarea id="process-group-comments" class="setting-input"></textarea>
-                        </div>
-                        <div class="read-only setting-field">
-                            <span id="read-only-process-group-comments"></span>
-                        </div>
-                    </div>
-                    <div class="editable settings-buttons">
-                        <div id="process-group-configuration-save" class="button">Apply</div>
-                        <div class="clear"></div>
+                    <div class="read-only setting-field">
+                        <span id="read-only-process-group-name"></span>
                     </div>
                 </div>
+                <div class="setting">
+                    <div class="setting-name">Process group comments</div>
+                    <div class="editable setting-field">
+                        <textarea id="process-group-comments" class="setting-input"></textarea>
+                    </div>
+                    <div class="read-only setting-field">
+                        <span id="read-only-process-group-comments"></span>
+                    </div>
+                </div>
+                <div class="editable settings-buttons">
+                    <div id="process-group-configuration-save" class="button">Apply</div>
+                    <div class="clear"></div>
+                </div>
             </div>
-            <div id="process-group-controller-services-tab-content" class="configuration-tab">
-                <div id="process-group-controller-services-table" class="settings-table"></div>
-            </div>
+        </div>
+        <div id="process-group-controller-services-tab-content" class="configuration-tab">
+            <div id="process-group-controller-services-table" class="settings-table"></div>
         </div>
     </div>
     <div id="process-group-refresh-container">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
index c81a7a9686..e4a3281e70 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/queue-listing.jsp
@@ -20,7 +20,7 @@
         <div id="queue-listing-header-text"></div>
     </div>
     <div id="queue-listing-stats-container">
-        <div id="queue-listing-stats">
+        <div id="queue-listing-stats" class="filter-status">
             Displaying&nbsp;<span id="displayed-flowfiles"></span>&nbsp;of&nbsp;<span id="total-flowfiles-count"></span>&nbsp;(<span id="total-flowfiles-size"></span>)
         </div>
         <div class="clear"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
index 509f337e8b..53d1cf1264 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-content.jsp
@@ -43,7 +43,7 @@
             <button id="provenance-search-button" class="fa fa-search"></button>
         </div>
         <div id="provenance-table"></div>
-        <div id="provenance-refresh-container" class="last-refreshed-container">
+        <div id="provenance-refresh-container">
             <button id="refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
             <div id="provenance-last-refreshed-container" class="last-refreshed-container">
                 Last updated:&nbsp;<span id="provenance-last-refreshed" class="value-color"></span>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css
index 8c537db4be..19172ee848 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css
@@ -42,9 +42,11 @@
 
 #component-state-table {
     overflow: hidden;
-    height: 55%;
-    width: 100%;
-    min-height: 150px;
+    position: absolute;
+    top: 208px;
+    left: 20px;
+    right: 20px;
+    bottom: 52px;
 }
 
 /*
@@ -53,7 +55,8 @@
 
 #clear-link-container {
     position: absolute;
-    bottom: 10px;
+    top: 186px;
+    right: 20px;
 }
 
 #clear-link.disabled {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
index b9d87fa57c..0f9fbb7dd6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
@@ -136,7 +136,7 @@ div.controller-service-canceling {
 */
 
 #controller-service-comments {
-    height: 250px;
+    height: 100%;
 }
 
 /*
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css
index 7abc80263f..ab2442da6f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css
@@ -22,14 +22,14 @@
     position: absolute;
     top: 0px;
     bottom: 0px;
-    left: 0px;
-    right: 0px;
-    height: 90%;
+    left: 20px;
+    right: 20px;
+    height: 100%;
     overflow: auto;
 }
 
 #counters-header-and-filter {
-    height: 32px;
+    height: 98px;
 }
 
 #counters-header-text {
@@ -44,6 +44,7 @@
     position: absolute;
     width: 100%;
     bottom: 0px;
+    left: 20px;
 }
 
 #counters-loading-container {
@@ -66,7 +67,9 @@
 /* counters table */
 
 #counters-table {
-    overflow: hidden;
-    height: 80%;
-    width: 100%;
+    position: absolute;
+    top: 98px;
+    left: 0px;
+    bottom: 47px;
+    right: 0px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
index f0366fb3f4..fdcefd099a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
@@ -199,7 +199,7 @@ div.go-to-link {
 
 #listing-request-percent-complete {
     margin-top: 10px;
-    width: 378px;
+    width: 100%;
     border-radius: 0;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css
index 9011005e2f..792a58f9ce 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css
@@ -22,9 +22,8 @@
     position: absolute;
     top: 0px;
     bottom: 0px;
-    left: 0px;
-    right: 0px;
-    height: 90%;
+    left: 20px;
+    right: 20px;
     overflow: auto;
 }
 
@@ -33,13 +32,13 @@
     font-weight: bold;
     color: #728E9B;
     font-family: Roboto Slab;
-    padding-bottom: 10px;
 }
 
 #history-refresh-container {
     position: absolute;
     width: 100%;
     bottom: 0px;
+    left: 20px;
 }
 
 #history-loading-container {
@@ -62,16 +61,18 @@
 /* history filter controls */
 
 #history-filter-container {
-    float: right;
+    position: absolute;
+    right: 0px;
+    top: 15px;
 }
 
 #history-filter-button {
     float: right;
-    margin-left: 1px;
+    margin-left: 5px;
 }
 
 #history-filter-overview {
-    display: none;
+    visibility: hidden;
     font-family: Roboto;
     font-size: 13px;
     margin-bottom: 5px;
@@ -137,7 +138,9 @@ div.history-details-name {
 /* history table */
 
 #history-table {
-    overflow: hidden;
-    height: 80%;
-    width: 100%;
+    position: absolute;
+    top: 62px;
+    left: 0px;
+    bottom: 47px;
+    right: 0px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
index d568992882..1db7f2af57 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-controller-service-dialog.css
@@ -66,7 +66,7 @@
 #controller-service-types-table {
     min-height: 150px;
     overflow: hidden;
-    height: 80%;
+    height: 70%;
     width: 100%;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
index e9f6151824..b95d2af92f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-processor-dialog.css
@@ -66,7 +66,7 @@
 #processor-types-table {
     min-height: 150px;
     overflow: hidden;
-    height: 80%;
+    height: 70%;
     width: 100%;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
index 10b0c11343..a391d1fb5f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-reporting-task-dialog.css
@@ -66,7 +66,7 @@
 #reporting-task-types-table {
     min-height: 150px;
     overflow: hidden;
-    height: 80%;
+    height: 70%;
     width: 100%;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
index bff0e2142c..31d82c388b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
@@ -17,6 +17,12 @@
 
 #process-group-configuration {
     display: none;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 20px;
+    right: 20px;
+    overflow: auto;
 }
 
 #add-process-group-configuration-controller-service {
@@ -27,11 +33,6 @@
     text-transform: uppercase;
 }
 
-#process-group-controller-services-table {
-    height: 100%;
-    width: 100%;
-}
-
 /* settings tabs */
 
 #process-group-configuration-tabs {
@@ -40,8 +41,8 @@
 
 #process-group-refresh-container {
     position: absolute;
-    bottom: 10px;
-    left: 20px;
+    bottom: 20px;
+    left: 0px;
     height: 32px;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
index c2e6171195..85478e8365 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
@@ -184,5 +184,5 @@ div.relationship-description {
 */
 
 #processor-comments {
-    height: 250px;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css
index 545d3a4198..c7e6cd1253 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css
@@ -22,9 +22,14 @@
     position: absolute;
     top: 0px;
     bottom: 0px;
-    left: 0px;
-    right: 0px;
+    left: 20px;
+    right: 20px;
     overflow: auto;
+    height: 100%;
+}
+
+#provenance-header-and-filter{
+    height: 111px;
 }
 
 #provenance-header-text {
@@ -33,6 +38,7 @@
     color: #728E9B;
     font-family: Roboto Slab;
     margin-bottom: 15px;
+    height: 118px;
 }
 
 #provenance-refresh-container {
@@ -176,23 +182,10 @@ div.searchable-field-value {
 
 /* event details dialog */
 
-#event-details-tabs {
-    background-color: transparent;
-    height: 21px;
-    width: 778px;
-}
-
-#event-details-dialog div.details-tab {
-    display: none;
-    height: 330px;
-    padding: 10px;
-}
-
 div.flowfile-container {
     width: 282px;
     height: 120px;
     overflow: auto;
-    border: 1px solid #aaa;
     padding: 5px;
     font-family: monospace;
     font-size: 12px;
@@ -203,60 +196,57 @@ div.flowfile-container {
 }
 
 div.event-header {
-    color: #264C58;
-    font-size: 11px;
+    color: #728e9b;
+    font-size: 12pt;
+    font-family: 'Roboto Slab';
+    font-style: normal;
     font-weight: bold;
-    margin-bottom: 5px;
+    line-height: 56px;
+    text-overflow: ellipsis;
 }
 
 #attributes-container {
     height: 290px;
     overflow: auto;
-    border: 1px solid #aaa;
     padding: 5px;
 }
 
 div.detail-name {
-    float: left;
-    width: 145px;
-    color: #527991;
-    font-size: 10px;
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: normal;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.detail-value {
-    float: left;
-    width: 270px;
-    overflow: hidden;
-    white-space: nowrap;
     line-height: normal;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
 
 div.attribute-detail {
-    margin-bottom: 5px;
+    margin-bottom: 15px;
 }
 
 div.attribute-name {
-    float: left;
-    width: 225px;
-    color: #527991;
-    font-size: 10px;
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: normal;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.attribute-value {
-    float: left;
-    width: 490px;
-    margin-left: 10px;
-    overflow: hidden;
-    white-space: nowrap;
     line-height: normal;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
 
 #attributes-header {
@@ -296,7 +286,7 @@ div.modified-attribute-value {
 }
 
 div.event-detail {
-    margin-bottom: 4px;
+    margin-bottom: 15px;
 }
 
 #input-content-download, #output-content-download, #replay-content {
@@ -310,22 +300,20 @@ div.event-detail {
 }
 
 div.content-detail-name {
-    color: #527991;
-    float: left;
-    font-size: 10px;
-    font-weight: bold;
-    line-height: normal;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 90px;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.content-detail-value {
-    width: 265px;
-    float: left;
     line-height: normal;
-    overflow: hidden;
-    white-space: nowrap;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
 
 #replay-details {
@@ -348,7 +336,7 @@ div.content-detail-value {
     position: absolute;
     top: 78px;
     left: 0px;
-    bottom: 35px;
+    bottom: 48px;
     right: 0px;
     overflow: hidden;
     background-color: #fff;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
index 127a4d871c..7f49d25780 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
@@ -19,6 +19,14 @@
     Queue listing styles
 */
 
+#queue-listing-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 20px;
+    right: 20px;
+}
+
 #queue-listing-header-text {
     font-size: 18px;
     font-weight: bold;
@@ -27,7 +35,6 @@
 }
 
 #queue-listing-stats-container {
-    margin-left: 20px;
     margin-top: 18px;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -35,8 +42,8 @@
 
 #queue-listing-refresh-container {
     position: absolute;
-    bottom: 10px;
-    left: 20px;
+    bottom: 20px;
+    left: 0px;
 }
 
 #queue-listing-last-refreshed {
@@ -52,113 +59,86 @@
     margin-left: 3px;
 }
 
-#queue-listing-stats {
-    font-size: 9px;
-    font-weight: bold;
-    color: #9f6000;
-    float: right;
-    line-height: normal;
-    margin-right: 20px;
-    margin-top: 6px;
-}
-
 /* queue listing table */
 
 #queue-listing-table {
-    overflow: hidden;
-    height: 80%;
-    width: 100%;
-}
-
-div.provenance-icon {
-    background-image: url(../images/iconProvenance.png);
-    background-position: top left;
-    background-size: cover;
-    width: 20px;
-    height: 20px;
+    position: absolute;
+    top: 53px;
+    left: 0px;
+    bottom: 68px;
+    right: 0px;
 }
 
 /* queue listing table */
 
 #queue-listing-message {
     position: absolute;
-    left: 20px;
-    bottom: 20px;
-    color: #f00;
-    font-size: 10px;
+    top: 36px;
+    color: #ba554a;
+    font-family: Roboto;
+    font-size: 13px;
+    font-weight: 500;
+    right: 0px;
+    max-width: 40%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* flowfile details */
 
-#flowfile-details-tabs {
-    background-color: transparent;
-    border-bottom: 3px solid #666666;
-    height: 21px;
-    width: 778px;
-}
-
-#flowfile-details-dialog div.details-tab {
-    background: url("../images/bgTabContainer.png") repeat-x scroll 0 0 #EEEEEE;
-    display: none;
-    height: 330px;
-    padding: 10px;
-}
-
 div.flowfile-header {
-    color: #264C58;
-    font-size: 11px;
+    color: #728e9b;
+    font-size: 12pt;
+    font-family: 'Roboto Slab';
+    font-style: normal;
     font-weight: bold;
-    margin-bottom: 5px;
+    line-height: 56px;
+    text-overflow: ellipsis;
 }
 
 #flowfile-attributes-container {
     height: 290px;
     overflow: auto;
-    border: 1px solid #aaa;
     padding: 5px;
 }
 
 div.detail-name {
-    float: left;
-    width: 145px;
-    color: #527991;
-    font-size: 10px;
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: normal;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.detail-value {
-    float: left;
-    width: 270px;
-    overflow: hidden;
-    white-space: nowrap;
     line-height: normal;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
 
 div.attribute-detail {
-    margin-bottom: 5px;
+    margin-bottom: 15px;
 }
 
 div.attribute-name {
-    float: left;
-    width: 225px;
-    color: #527991;
-    font-size: 10px;
-    font-weight: bold;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: normal;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.attribute-value {
-    float: left;
-    width: 490px;
-    margin-left: 10px;
-    overflow: hidden;
-    white-space: nowrap;
     line-height: normal;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
 
 #flowfile-attributes-header {
@@ -166,7 +146,7 @@ div.attribute-value {
 }
 
 div.flowfile-detail {
-    margin-bottom: 4px;
+    margin-bottom: 15px;
 }
 
 #content-download {
@@ -180,20 +160,18 @@ div.flowfile-detail {
 }
 
 div.content-detail-name {
-    color: #527991;
-    float: left;
-    font-size: 10px;
-    font-weight: bold;
-    line-height: normal;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 90px;
+    width: 100%;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: Roboto Slab;
+    padding-bottom: 4px;
+    color: #262626;
 }
 
 div.content-detail-value {
-    width: 200px;
-    float: left;
     line-height: normal;
-    overflow: hidden;
-    white-space: nowrap;
+    width: 100%;
+    color: #775351;
+    font-size: 13px;
+    font-weight: bold;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
index bf9fd367ed..a53a7b2b33 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/reporting-task.css
@@ -72,5 +72,5 @@ input.reporting-task-scheduling-period {
 */
 
 #reporting-task-comments {
-    height: 250px;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/settings.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/settings.css
index 5ad7155fb9..47388792a9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/settings.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/settings.css
@@ -16,7 +16,12 @@
  */
 
 #settings {
-    display: none;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 20px;
+    right: 20px;
+    overflow: auto;
 }
 
 div.settings-header-text {
@@ -24,12 +29,12 @@ div.settings-header-text {
     font-size: 18px;
     font-weight: bold;
     color: #728E9B;
-    padding-top: 28px;
     margin-bottom: 30px;
 }
 
 div.settings-container {
     margin-top: 18px;
+    height: 85%;
 }
 
 #new-service-or-task {
@@ -38,10 +43,8 @@ div.settings-container {
 }
 
 #settings-refresh-container {
-    height: 32px;
     position: absolute;
-    bottom: 10px;
-    left: 20px;
+    bottom: 20px;
 }
 
 /* settings tabs */
@@ -51,10 +54,11 @@ div.settings-tabs {
 }
 
 div.settings-table {
-    min-height: 150px;
-    overflow: hidden;
-    height: 80%;
-    width: 100%;
+    position: absolute;
+    top: 111px;
+    left: 0px;
+    bottom: 72px;
+    right: 0px;
 }
 
 span.sorted {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css
index 8552af1958..332107ec3a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css
@@ -69,6 +69,9 @@ div.close-hover {
 }
 
 #shell {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 48px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
index f3f31fa6d5..6398715440 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
@@ -23,8 +23,10 @@
     position: absolute;
     top: 0px;
     bottom: 35px;
-    left: 0px;
-    right: 0px;
+    left: 20px;
+    right: 20px;
+    overflow: auto;
+    height: 100%;
 }
 
 #summary-header-text {
@@ -37,8 +39,9 @@
 
 #flow-summary-refresh-container {
     position: absolute;
-    width: 100%;
     bottom: 0px;
+    left: 20px;
+    right: 20px;
 }
 
 #summary-loading-container {
@@ -59,9 +62,10 @@
 }
 
 div.status-text {
-    margin-left: 4px;
-    float: left;
+    padding-left: 4px;
     line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* view options */
@@ -265,7 +269,7 @@ div.summary-table {
     position: absolute;
     top: 151px;
     left: 0px;
-    bottom: 0px;
+    bottom: 48px;
     right: 0px;
     overflow: hidden;
     background-color: #fff;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css
index fb7e665bbf..ed3d5e7618 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css
@@ -22,12 +22,16 @@
     position: absolute;
     top: 0px;
     bottom: 0px;
-    left: 0px;
-    right: 0px;
-    height: 90%;
+    left: 20px;
+    right: 20px;
+    height: 100%;
     overflow: auto;
 }
 
+#templates-header-and-filter {
+    height: 108px;
+}
+
 #templates-header-text {
     font-size: 18px;
     font-weight: bold;
@@ -40,6 +44,7 @@
     position: absolute;
     width: 100%;
     bottom: 0px;
+    left: 20px;
 }
 
 #templates-loading-container {
@@ -178,8 +183,9 @@ input.templates-filter-list {
 /* templates table */
 
 #templates-table {
-    overflow: hidden;
-    height: 70%;
-    width: 100%;
-    top: -28px;
+    position: absolute;
+    top: 108px;
+    left: 0px;
+    bottom: 47px;
+    right: 0px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
index ba3c33861e..8cbd057079 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
@@ -47,7 +47,7 @@ div.property-table {
     width: 100%;
     min-height: 150px;
     overflow: hidden;
-    height: 80%;
+    height: 90%;
 }
 
 .property-table .fa {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
index c6ed58af37..653e0976ef 100755
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
@@ -102,6 +102,14 @@ classes should alter those!
     border-right: 0px !important;
 }
 
+.grid-canvas *:last-child .fa{
+    float: left;
+}
+
+.grid-canvas *:last-child .icon{
+    float: left;
+}
+
 .slick-viewport .fa {
     color: #004849;
     line-height: 22px;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
index 219f514dfe..e005adc499 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
@@ -60,6 +60,17 @@ ul.tab-pane {
 }
 
 div.configuration-tab {
-    height: 320px;
     display: none;
+}
+
+div[id$=-tabs-content] {
+    height: 85%;
+}
+
+div[id$=-tab-content] {
+    height: 100%;
+}
+
+div[id$=-properties] {
+    height: 100%;
 }
\ No newline at end of file
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js
index bd1099d756..be8f2d6b99 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/bulletin-board/nf-bulletin-board.js
@@ -43,22 +43,6 @@ $(document).ready(function () {
 
     // initialize the bulletin board
     nf.ng.Bridge.injector.get('bulletinBoardCtrl').init();
-
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#bulletin-board').css('margin', 40);
-        $('#bulletin-board-refresh-container').css({
-            "position": "absolute",
-            "width": "100%",
-            "bottom": "40px",
-            "margin": "40px"
-        });
-
-        $('#bulletin-board-status-container').css({
-            "float": "right",
-            "padding-right": "80px"
-        });
-    }
 });
 
 nf.ng.BulletinBoardCtrl = function (serviceProvider) {
@@ -290,6 +274,27 @@ nf.ng.BulletinBoardCtrl = function (serviceProvider) {
          * Initializes the bulletin board page.
          */
         init: function () {
+            //alter styles if we're not in the shell
+            if (top === window) {
+                $('body').css({
+                    'height': $(window).height() + 'px',
+                    'width': $(window).width() + 'px'
+                });
+
+                $('#bulletin-board').css('margin', 40);
+                $('#bulletin-board-refresh-container').css({
+                    "position": "absolute",
+                    "width": "100%",
+                    "bottom": "40px",
+                    "margin": "40px"
+                });
+
+                $('#bulletin-board-status-container').css({
+                    "float": "right",
+                    "padding-right": "80px"
+                });
+            }
+            
             nf.Storage.init();
 
             initializePage().done(function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
index 0724668a2e..0104b3670c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js
@@ -528,12 +528,13 @@ nf.Canvas = (function () {
                 updateFlowStatusContainerSize();
 
                 // resize grids when appropriate
-                if ($('#process-group-controller-services-table').is(':visible')) {
-                    nf.ProcessGroupConfiguration.resetTableSize();
-                } else if ($('#controller-services-table').is(':visible') || $('#reporting-tasks-table').is(':visible')) {
-                    nf.Settings.resetTableSize();
-                } else if ($('#queue-listing-table').is(':visible')) {
-                    nf.QueueListing.resetTableSize();
+                var gridElements = $('*[class*="slickgrid_"]');
+                for (var i = 0, len = gridElements.length; i < len; i++) {
+                    if ($(gridElements[i]).is(':visible')){
+                        setTimeout(function(gridElement){
+                            gridElement.data('gridInstance').resizeCanvas();
+                        }, 50, $(gridElements[i]));
+                    }
                 }
             }
         }).on('keydown', function (evt) {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
index df12db0fd5..aadc57bcdb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js
@@ -252,6 +252,7 @@ nf.QueueListing = (function () {
 
             // update the button model of the drop request status dialog
             $('#listing-request-status-dialog').modal('setButtonModel', [{
+                headerText: 'Queue Listing',
                 buttonText: 'Stop',
                 color: {
                     base: '#728E9B',
@@ -318,10 +319,8 @@ nf.QueueListing = (function () {
                             } else if (listingRequest.destinationRunning === true) {
                                 queueListingMessage.text('The destination of this queue is currently running. This listing may no longer be accurate.').show();
                             }
-                            queueListingTable.css('bottom', '35px');
                         } else {
                             queueListingMessage.text('').hide();
-                            queueListingTable.css('bottom', '20px');
                         }
 
                         // get the grid to load the data
@@ -611,7 +610,7 @@ nf.QueueListing = (function () {
             if (nf.Common.canAccessProvenance()) {
                 // function for formatting actions
                 var actionsFormatter = function () {
-                    return '<div title="Provenance" class="pointer provenance-icon view-provenance"></div>';
+                    return '<div title="Provenance" class="pointer icon icon-provenance view-provenance"></div>';
                 };
 
                 queueListingColumns.push({
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
index c0b4cc39cc..b736df9ef6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-reporting-task.js
@@ -561,6 +561,8 @@ nf.ReportingTask = (function () {
 
                 // show the details
                 $('#reporting-task-configuration').modal('show');
+
+                $('#reporting-task-properties').propertytable('resetTableSize');
             }).fail(nf.Common.handleAjaxError);
         },
 
@@ -673,6 +675,8 @@ nf.ReportingTask = (function () {
 
                 // show the details
                 reportingTaskDialog.modal('show');
+
+                $('#reporting-task-properties').propertytable('resetTableSize');
             });
         },
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
index e9c5228446..3c32a0de24 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters-table.js
@@ -165,11 +165,6 @@ nf.CountersTable = (function () {
                 }
             });
 
-            // listen for browser resize events to update the page size
-            $(window).resize(function () {
-                nf.CountersTable.resetTableSize();
-            });
-
             // initialize the templates table
             var countersColumns = [
                 {id: 'context', name: 'Context', field: 'context', sortable: true, resizable: true},
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
index 1d6e5ec347..4b7c9210d2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/counters/nf-counters.js
@@ -20,12 +20,6 @@
 $(document).ready(function () {
     // initialize the counters page
     nf.Counters.init();
-
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#counters').css('margin', 40);
-        $('#counters-refresh-container').css('margin', 40);
-    }
 });
 
 nf.Counters = (function () {
@@ -140,8 +134,22 @@ nf.Counters = (function () {
                 nf.CountersTable.loadCountersTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeCountersPage().done(function () {
-                        // configure the initial grid height
-                        nf.CountersTable.resetTableSize();
+                        var setBodySize = function () {
+                            //alter styles if we're not in the shell
+                            if (top === window) {
+                                $('body').css({
+                                    'height': $(window).height() + 'px',
+                                    'width': $(window).width() + 'px'
+                                });
+                                
+                                $('#counters').css('margin', 40);
+                                $('#counters-table').css('bottom', 127);
+                                $('#counters-refresh-container').css('margin', 40);
+                            }
+
+                            // configure the initial grid height
+                            nf.CountersTable.resetTableSize();
+                        };
 
                         // get the about details
                         $.ajax({
@@ -155,7 +163,13 @@ nf.Counters = (function () {
                             // set the document title and the about title
                             document.title = countersTitle;
                             $('#counters-header-text').text(countersTitle);
+
+                            // set the initial size
+                            setBodySize();
                         }).fail(nf.Common.handleAjaxError);
+
+                        // listen for browser resize events to reset the body size
+                        $(window).resize(setBodySize);
                     });
                 });
             });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
index 5a7ff92a1a..d55d96b632 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-model.js
@@ -150,9 +150,9 @@
 
                     // show the filter message if applicable
                     if (query['sourceId'] || query['userName'] || query['startDate'] || query['endDate']) {
-                        $('#history-filter-overview').show();
+                        $('#history-filter-overview').css('visibility', 'visible');
                     } else {
-                        $('#history-filter-overview').hide();
+                        $('#history-filter-overview').css('visibility', 'hidden');
                     }
 
                     // clear the current request
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
index 83f21d8e07..52816f6389 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js
@@ -247,18 +247,13 @@ nf.HistoryTable = (function () {
      * Initializes the history table.
      */
     var initHistoryTable = function () {
-        // listen for browser resize events to update the page size
-        $(window).resize(function () {
-            nf.HistoryTable.resetTableSize();
-        });
-
         // clear the current filter
         $('#clear-history-filter').click(function () {
             // clear the filter dialog
             $('#history-filter').val('');
 
             // hide the overview
-            $('#history-filter-overview').hide();
+            $('#history-filter-overview').css('visibility', 'hidden');
 
             // clear the filter
             var historyGrid = $('#history-table').data('gridInstance');
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
index 16a5e47a3d..674e862f62 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history.js
@@ -20,12 +20,6 @@
 $(document).ready(function () {
     // initialize the status page
     nf.History.init();
-
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#history').css('margin', 40);
-        $('#history-refresh-container').css('margin', 40);
-    }
 });
 
 nf.History = (function () {
@@ -142,8 +136,21 @@ nf.History = (function () {
 
                 // once the table is initialized, finish initializing the page
                 initializeHistoryPage().done(function () {
-                    // configure the initial grid height
-                    nf.HistoryTable.resetTableSize();
+                    var setBodySize = function () {
+                        //alter styles if we're not in the shell
+                        if (top === window) {
+                            $('body').css({
+                                'height': $(window).height() + 'px',
+                                'width': $(window).width() + 'px'
+                            });
+                            
+                            $('#history').css('margin', 40);
+                            $('#history-refresh-container').css('margin', 40);
+                        }
+
+                        // configure the initial grid height
+                        nf.HistoryTable.resetTableSize();
+                    };
 
                     // get the about details
                     $.ajax({
@@ -157,7 +164,13 @@ nf.History = (function () {
                         // set the document title and the about title
                         document.title = historyTitle;
                         $('#history-header-text').text(historyTitle);
+
+                        // set the initial size
+                        setBodySize();
                     }).fail(nf.Common.handleAjaxError);
+
+                    // listen for browser resize events to reset the body size
+                    $(window).resize(setBodySize);
                 });
             });
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
index d9f7a84dc3..ca1a83e1bf 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-table.js
@@ -566,11 +566,6 @@ nf.ProvenanceTable = (function () {
             }
         });
 
-        // listen for browser resize events to update the page size
-        $(window).resize(function () {
-            nf.ProvenanceTable.resetTableSize();
-        });
-
         // clear the current search
         $('#clear-provenance-search').click(function () {
             // clear each searchable field
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
index 568d7e012d..e1891a2123 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance.js
@@ -20,11 +20,6 @@
 $(document).ready(function () {
     // initialize the status page
     nf.Provenance.init();
-
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#provenance').css('margin', 40);
-    }
 });
 
 nf.Provenance = (function () {
@@ -223,11 +218,34 @@ nf.Provenance = (function () {
                         });
                     }
 
-                    // once the table is initialized, finish initializing the page
-                    initializeProvenancePage().done(function () {
+                    var setBodySize = function () {
+                        //alter styles if we're not in the shell
+                        if (top === window) {
+                            $('body').css({
+                                'height': $(window).height() + 'px',
+                                'width': $(window).width() + 'px'
+                            });
+                            
+                            $('#provenance').css('margin', 40);
+                            $('#provenance-table').css('bottom', 127);
+                            $('#provenance-refresh-container').css({
+                                'margin': '0px 0px 40px 0px',
+                                'bottom': '40px'
+                            });
+                        }
+
                         // configure the initial grid height
                         nf.ProvenanceTable.resetTableSize();
+                    };
+
+                    // once the table is initialized, finish initializing the page
+                    initializeProvenancePage().done(function () {
+                        // set the initial size
+                        setBodySize();
                     });
+
+                    // listen for browser resize events to reset the body size
+                    $(window).resize(setBodySize);
                 });
             });
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
index 92a7684a4f..b8c1a582ad 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary.js
@@ -40,23 +40,6 @@ $(document).ready(function () {
 
     // initialize the summary page
     nf.Summary.init();
-    
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#summary').css('margin', 40);
-        $('#flow-summary-refresh-container').css({
-            "position": "absolute",
-            "width": "100%",
-            "bottom": "0px",
-            "margin": "40px"
-        });
-
-        $('#system-diagnostics-link-container').css({
-            "float": "right",
-            "margin-top": "8px",
-            "padding-right": "80px"
-        });
-    }
 });
 
 nf.Summary = (function () {
@@ -175,10 +158,21 @@ nf.Summary = (function () {
                     initializeSummaryPage().done(function () {
 
                         var setBodySize = function () {
-                            $('body').css({
-                                'height': $(window).height() + 'px',
-                                'width': $(window).width() + 'px'
-                            });
+                            //alter styles if we're not in the shell
+                            if (top === window) {
+                                $('body').css({
+                                    'height': $(window).height() + 'px',
+                                    'width': $(window).width() + 'px'
+                                });
+                                
+                                $('#summary').css('margin', 40);
+                                $('div.summary-table').css('bottom', 127);
+                                $('#flow-summary-refresh-container').css({
+                                    "position": "absolute",
+                                    "bottom": "0px",
+                                    "margin": "40px"
+                                });
+                            }
 
                             nf.SummaryTable.resetTableSize();
                         };
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
index ec3a350fe7..81b80b72d8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates-table.js
@@ -216,11 +216,6 @@ nf.TemplatesTable = (function () {
                 }
             });
 
-            // listen for browser resize events to update the page size
-            $(window).resize(function () {
-                nf.TemplatesTable.resetTableSize();
-            });
-
             // enable template uploading if DFM
             if (nf.Common.isDFM()) {
                 $('#upload-template-container').show();
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
index 7f0956272a..86d9934506 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/templates/nf-templates.js
@@ -20,12 +20,6 @@
 $(document).ready(function () {
     // initialize the templates page
     nf.Templates.init();
-
-    //alter styles if we're not in the shell
-    if (top === window) {
-        $('#templates').css('margin', 40);
-        $('#templates-refresh-container').css('margin', 40);
-    }
 });
 
 nf.Templates = (function () {
@@ -229,8 +223,22 @@ nf.Templates = (function () {
                 nf.TemplatesTable.loadTemplatesTable().done(function () {
                     // once the table is initialized, finish initializing the page
                     initializeTemplatesPage().done(function () {
-                        // configure the initial grid height
-                        nf.TemplatesTable.resetTableSize();
+                        var setBodySize = function () {
+                            //alter styles if we're not in the shell
+                            if (top === window) {
+                                $('body').css({
+                                    'height': $(window).height() + 'px',
+                                    'width': $(window).width() + 'px'
+                                });
+
+                                $('#templates').css('margin', 40);
+                                $('#templates-table').css('bottom', 127);
+                                $('#templates-refresh-container').css('margin', 40);
+                            }
+
+                            // configure the initial grid height
+                            nf.TemplatesTable.resetTableSize();
+                        };
 
                         // get the about details
                         $.ajax({
@@ -244,7 +252,13 @@ nf.Templates = (function () {
                             // set the document title and the about title
                             document.title = templatesTitle;
                             $('#templates-header-text').text(templatesTitle);
+
+                            // set the initial size
+                            setBodySize();
                         }).fail(nf.Common.handleAjaxError);
+
+                        // listen for browser resize events to reset the body size
+                        $(window).resize(setBodySize);
                     });
                 });
             });