From 293dc299363713097752ee8ae3ab8ff3509ee0a2 Mon Sep 17 00:00:00 2001
From: Scott Aslan <jaslan@hortonworks.com>
Date: Tue, 5 Jul 2016 09:29:33 -0400
Subject: [PATCH] [NIFI-2081] Responsive dialog content, tab content, and
 scrollable styles. This closes #594

---
 .../canvas/process-group-configuration.jsp    |  52 +--
 .../partials/canvas/settings-content.jsp      |   4 +-
 .../provenance/provenance-search-dialog.jsp   |   2 +-
 .../partials/summary/summary-content.jsp      |  26 +-
 .../summary/system-diagnostics-dialog.jsp     | 212 ++++-----
 .../src/main/webapp/css/bulletin-board.css    |  10 +-
 .../src/main/webapp/css/cluster.css           |   1 +
 .../src/main/webapp/css/component-state.css   |  11 +-
 .../main/webapp/css/connection-details.css    |   2 -
 .../main/webapp/css/controller-service.css    |   6 -
 .../src/main/webapp/css/counters.css          |   1 +
 .../src/main/webapp/css/dialog.css            |   4 +-
 .../src/main/webapp/css/history.css           |   1 +
 .../nifi-web-ui/src/main/webapp/css/main.css  |  16 +-
 .../css/process-group-configuration.css       |  12 +-
 .../src/main/webapp/css/processor-details.css |   2 -
 .../src/main/webapp/css/provenance.css        |   6 +-
 .../src/main/webapp/css/queue-listing.css     |   3 +-
 .../remote-process-group-configuration.css    |   3 +-
 .../src/main/webapp/css/settings.css          |  22 +-
 .../nifi-web-ui/src/main/webapp/css/shell.css |   8 +-
 .../src/main/webapp/css/status-history.css    |   1 -
 .../src/main/webapp/css/summary.css           |  70 ++-
 .../src/main/webapp/css/templates.css         |   1 +
 .../webapp/js/jquery/modal/jquery.modal.css   |  13 +-
 .../webapp/js/jquery/modal/jquery.modal.js    | 403 ++++++++++--------
 .../propertytable/jquery.propertytable.css    |   8 +-
 .../propertytable/jquery.propertytable.js     |   2 +
 .../webapp/js/jquery/tabbs/jquery.tabbs.css   |  21 +-
 .../webapp/js/jquery/tabbs/jquery.tabbs.js    |  17 +-
 .../nf-ng-canvas-global-menu-controller.js    |  10 +-
 .../nf-ng-canvas-operate-controller.js        |   2 +
 .../components/nf-ng-group-component.js       |   1 +
 .../components/nf-ng-input-port-component.js  |   1 +
 .../components/nf-ng-processor-component.js   |   3 +-
 .../nf-ng-remote-process-group-component.js   |   1 +
 .../components/nf-ng-template-component.js    |   1 +
 .../main/webapp/js/nf/canvas/nf-actions.js    |   1 +
 .../src/main/webapp/js/nf/canvas/nf-canvas.js | 123 ++++--
 .../webapp/js/nf/canvas/nf-component-state.js |   1 +
 .../nf/canvas/nf-connection-configuration.js  |   5 +
 .../js/nf/canvas/nf-controller-service.js     |   7 +
 .../js/nf/canvas/nf-controller-services.js    |   1 +
 .../src/main/webapp/js/nf/canvas/nf-go-to.js  |   1 +
 .../js/nf/canvas/nf-label-configuration.js    |   1 +
 .../js/nf/canvas/nf-port-configuration.js     |   1 +
 .../webapp/js/nf/canvas/nf-port-details.js    |   1 +
 .../canvas/nf-process-group-configuration.js  |   7 +-
 .../js/nf/canvas/nf-process-group-details.js  |   1 +
 .../nf/canvas/nf-processor-configuration.js   |   5 +
 .../webapp/js/nf/canvas/nf-queue-listing.js   |   9 +-
 .../nf-remote-process-group-configuration.js  |   1 +
 .../canvas/nf-remote-process-group-details.js |   1 +
 .../canvas/nf-remote-process-group-ports.js   |   2 +
 .../webapp/js/nf/canvas/nf-reporting-task.js  |   5 +
 .../main/webapp/js/nf/canvas/nf-settings.js   |   2 +
 .../webapp/js/nf/cluster/nf-cluster-table.js  |   1 +
 .../main/webapp/js/nf/counters/nf-counters.js |  36 +-
 .../webapp/js/nf/history/nf-history-table.js  |   3 +
 .../main/webapp/js/nf/history/nf-history.js   |  36 +-
 .../src/main/webapp/js/nf/nf-common.js        |  17 +
 .../webapp/js/nf/nf-connection-details.js     |   5 +
 .../src/main/webapp/js/nf/nf-dialog.js        |   2 +
 .../main/webapp/js/nf/nf-processor-details.js |   5 +
 .../src/main/webapp/js/nf/nf-shell.js         |  64 ++-
 .../main/webapp/js/nf/nf-status-history.js    |   8 +-
 .../js/nf/provenance/nf-provenance-lineage.js |   1 +
 .../js/nf/provenance/nf-provenance-table.js   |   7 +
 .../webapp/js/nf/provenance/nf-provenance.js  |  36 +-
 .../webapp/js/nf/summary/nf-cluster-search.js |   1 +
 .../webapp/js/nf/summary/nf-summary-table.js  |  12 +
 .../main/webapp/js/nf/summary/nf-summary.js   |  36 +-
 .../webapp/js/nf/templates/nf-templates.js    |  36 +-
 73 files changed, 940 insertions(+), 500 deletions(-)

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 e94434f221..be69652a70 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
@@ -18,39 +18,41 @@
 <div id="process-group-configuration">
     <div id="process-group-configuration-header-text" class="settings-header-text">Process Group Configuration</div>
     <div class="settings-container">
-        <div class="tab-container">
-            <div id="process-group-configuration-tabs" class="settings-tabs"></div>
+        <div>
+            <div id="process-group-configuration-tabs" class="settings-tabs tab-container"></div>
             <button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus"></button>
             <div class="clear"></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 id="process-group-configuration-tabs-content">
+            <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>
-                    <div class="read-only setting-field">
-                        <span id="read-only-process-group-name"></span>
+                    <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>
-                <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 class="editable settings-buttons">
+                        <div id="process-group-configuration-save" class="button">Apply</div>
+                        <div class="clear"></div>
                     </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>
-        <div id="process-group-controller-services-tab-content" class="configuration-tab">
-            <div id="process-group-controller-services-table" class="settings-table"></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>
     <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/settings-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
index d421f852f6..00e17ea81b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
@@ -18,8 +18,8 @@
 <div id="settings">
     <div id="settings-header-text" class="settings-header-text">NiFi Settings</div>
     <div class="settings-container">
-        <div class="tab-container">
-            <div id="settings-tabs" class="settings-tabs"></div>
+        <div>
+            <div id="settings-tabs" class="settings-tabs tab-container"></div>
             <button id="new-service-or-task" class="add-button fa fa-plus"></button>
             <div class="clear"></div>
         </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-search-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
index 565d016bdf..0430518c03 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
@@ -18,7 +18,7 @@
 <div id="provenance-search-dialog" class="hidden medium-dialog">
     <div class="dialog-content">
         <div class="setting">
-            <div class="setting-name">Fields</div>
+            <div class="setting-name" style="padding-top:10px;">Fields</div>
             <div class="setting-field">
                 <div id="searchable-fields-container">
                     <div id="no-searchable-fields" class="unset">No searchable fields have been configured.</div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
index 3ffe381e46..f8195b5396 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
@@ -20,20 +20,20 @@
         <div id="summary-header-text">NiFi Summary</div>
     </div>
     <div id="summary-tabs" class="tab-container"></div>
-    <div id="summary-filter-controls" class="filter-controls">
-        <div id="summary-filter-status" class="filter-status">
-            Displaying&nbsp;<span id="displayed-items"></span>&nbsp;of&nbsp;<span id="total-items"></span>
-        </div>
-        <div id="summary-filter-container" class="filter-container">
-            <input type="text" placeholder="Filter" id="summary-filter" class="filter"/>
-            <div id="summary-filter-type" class="filter-type"></div>
-        </div>
-    </div>
-    <div id="view-options-container">
-        View:&nbsp;
-        <span id="view-single-node-link" class="link">Single node</span>&nbsp;&nbsp;<span id="view-cluster-link" class="link">Cluster</span>
-    </div>
     <div id="summary-tabs-content">
+        <div id="summary-filter-controls" class="filter-controls">
+            <div id="summary-filter-status" class="filter-status">
+                Displaying&nbsp;<span id="displayed-items"></span>&nbsp;of&nbsp;<span id="total-items"></span>
+            </div>
+            <div id="summary-filter-container" class="filter-container">
+                <input type="text" placeholder="Filter" id="summary-filter" class="filter"/>
+                <div id="summary-filter-type" class="filter-type"></div>
+            </div>
+        </div>
+        <div id="view-options-container">
+            View:&nbsp;
+            <span id="view-single-node-link" class="link">Single node</span>&nbsp;&nbsp;<span id="view-cluster-link" class="link">Cluster</span>
+        </div>
         <div id="processor-summary-tab-content" class="configuration-tab">
             <div id="processor-summary-table" class="summary-table"></div>
         </div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
index 96145056c1..9ab19e3601 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
@@ -18,116 +18,117 @@
 <div id="system-diagnostics-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="system-diagnostics-tabs" class="tab-container"></div>
-        <div id="jvm-tab-content" class="configuration-tab">
-            <div class="settings-left">
+        <div id="system-diagnostics-tabs-content">
+            <div id="jvm-tab-content" class="configuration-tab">
+                <div class="settings-left">
+                    <div class="setting">
+                        <input type="hidden" id=""/>
+                        <div class="setting-header">Heap <span id="utilization-heap"></span></div>
+                        <div class="setting-field">
+                            <table id="heap-table">
+                                <tbody>
+                                <tr>
+                                    <td class="memory-header setting-name">Max:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="max-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Total:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="total-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Used:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="used-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Free:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="free-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="clear"></div>
+                    </div>
+                </div>
+                <div class="spacer"></div>
+                <div class="settings-right">
+                    <div class="setting">
+                        <div class="setting-header">Non-heap <span id="utilization-non-heap"></span></div>
+                        <div class="setting-field">
+                            <table id="heap-table">
+                                <tbody>
+                                <tr>
+                                    <td class="memory-header setting-name">Max:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="max-non-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Total:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="total-non-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Used:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="used-non-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td class="setting-name">Free:</td>
+                                </tr>
+                                <tr>
+                                    <td><span id="free-non-heap"></span></td>
+                                </tr>
+                                <tr>
+                                    <td></td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="clear"></div>
+                    </div>
+                </div>
+                <div class="clear"></div>
                 <div class="setting">
-                    <input type="hidden" id=""/>
-                    <div class="setting-header">Heap <span id="utilization-heap"></span></div>
-                    <div class="setting-field">
-                        <table id="heap-table">
-                            <tbody>
-                            <tr>
-                                <td class="memory-header setting-name">Max:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="max-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Total:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="total-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Used:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="used-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Free:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="free-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            </tbody>
+                    <div class="setting-header">Garbage Collection</div>
+                    <div id="garbage-collection-container" class="setting-field">
+                        <table id="garbage-collection-table">
+                            <tbody></tbody>
                         </table>
                     </div>
-                    <div class="clear"></div>
                 </div>
             </div>
-            <div class="spacer"></div>
-            <div class="settings-right">
-                <div class="setting">
-                    <div class="setting-header">Non-heap <span id="utilization-non-heap"></span></div>
-                    <div class="setting-field">
-                        <table id="heap-table">
-                            <tbody>
-                            <tr>
-                                <td class="memory-header setting-name">Max:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="max-non-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Total:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="total-non-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Used:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="used-non-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            <tr>
-                                <td class="setting-name">Free:</td>
-                            </tr>
-                            <tr>
-                                <td><span id="free-non-heap"></span></td>
-                            </tr>
-                            <tr>
-                                <td></td>
-                            </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div class="clear"></div>
-                </div>
-            </div>
-            <div class="clear"></div>
-            <div class="setting">
-                <div class="setting-header">Garbage Collection</div>
-                <div id="garbage-collection-container" class="setting-field">
-                    <table id="garbage-collection-table">
-                        <tbody></tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        <div id="system-tab-content"class="configuration-tab">
+            <div id="system-tab-content"class="configuration-tab">
             <div class="settings-left">
                 <div class="setting">
                     <div class="setting-name">Available Processors:</div>
@@ -162,6 +163,7 @@
                 </div>
             </div>
         </div>
+        </div>
         <div id="system-diagnostics-refresh-container">
             <button id="system-diagnostics-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
             <div id="system-diagnostics-last-refreshed-container" class="last-refreshed-container">
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
index 6a0db2f136..a43de40b33 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
@@ -18,6 +18,10 @@
     Bulletin Board Styles
 */
 
+#bulletin-board {
+    margin: 20px;
+}
+
 #bulletin-board-header-text {
     font-size: 18px;
     font-weight: bold;
@@ -28,8 +32,10 @@
 
 #bulletin-board-refresh-container {
     position: absolute;
-    width: 100%;
-    bottom: 0px;
+    right: 0px;
+    bottom: 20px;
+    margin: 20px;
+    left: 0px;
 }
 
 #bulletin-board-loading-container {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
index 94a34dfe03..612a147135 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
@@ -97,6 +97,7 @@ input.cluster-filter-list {
     overflow: hidden;
     height: 80%;
     width: 100%;
+    min-height: 150px;
 }
 
 span.sorted {
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 19172ee848..ee4407da5e 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
@@ -43,10 +43,11 @@
 #component-state-table {
     overflow: hidden;
     position: absolute;
-    top: 208px;
-    left: 20px;
-    right: 20px;
-    bottom: 52px;
+    top: 142px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    min-height: 150px;
 }
 
 /*
@@ -55,7 +56,7 @@
 
 #clear-link-container {
     position: absolute;
-    top: 186px;
+    top: 120px;
     right: 20px;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
index b0807a0fd0..61d91096d4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
@@ -26,14 +26,12 @@
 }
 
 #connection-details div.configuration-tab {
-    overflow: auto;
     padding: 10px;
     display: none;
 }
 
 #read-only-relationship-names {
     border: 0 solid #CCCCCC;
-    height: 145px;
     overflow-x: hidden;
     overflow-y: auto;
     padding: 2px 2px 0;
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 0f9fbb7dd6..9ac5555c4a 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
@@ -54,10 +54,8 @@
 
 #controller-service-referencing-components {
     border: 0 solid #CCCCCC;
-    height: 280px;
     overflow: auto;
     padding: 2px;
-    width: 376px;
 }
 
 div.referencing-component-block {
@@ -161,8 +159,6 @@ div.controller-service-canceling {
 #disable-controller-service-referencing-components {
     border: 0 solid #CCCCCC;
     padding: 2px;
-    width: 429px;
-    height: 335px;
     overflow: auto;
     white-space: nowrap;
 }
@@ -198,8 +194,6 @@ div.controller-service-canceling {
 #enable-controller-service-referencing-components {
     border: 0 solid #ccc;
     padding: 2px;
-    width: 429px;
-    height: 335px;
     overflow: auto;
     white-space: nowrap;
 }
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 ab2442da6f..65e6597580 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
@@ -72,4 +72,5 @@
     left: 0px;
     bottom: 47px;
     right: 0px;
+    min-height: 150px;
 }
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 fdcefd099a..51e1dff032 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,6 @@ div.go-to-link {
 
 #listing-request-percent-complete {
     margin-top: 10px;
-    width: 100%;
     border-radius: 0;
 }
 
@@ -212,7 +211,6 @@ div.progress-label {
     display: block;
     font-weight: bold;
     text-align: center;
-    /*width: 378px;*/
     margin-top: 4px;
 }
 
@@ -264,7 +262,7 @@ ul.result li {
     font-family: 'Roboto Slab';
     font-style: normal;
     font-weight: bold;
-    line-height: 56px;
+    padding-bottom: 20px;
     text-overflow: ellipsis;
 }
 
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 792a58f9ce..cf1014ec9a 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
@@ -143,4 +143,5 @@ div.history-details-name {
     left: 0px;
     bottom: 47px;
     right: 0px;
+    min-height: 150px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
index a809760541..55904fae5d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
@@ -311,6 +311,14 @@ textarea {
     font-size: 13px !important;
 }
 
+#new-template-description {
+    position: absolute;
+    top: 81px;
+    bottom: 0px;
+    height: inherit;
+    min-height: 32px;
+}
+
 ul.property-info {
     list-style-type: disc;
     margin-left: 10px;
@@ -507,7 +515,8 @@ input:focus {
 /* filter controls */
 
 .filter-controls {
-    width: 100%;
+    position: absolute;
+    top: 10px;
 }
 
 .filter-container {
@@ -606,8 +615,7 @@ div.secondary-button:hover {
 }
 
 .scrollable {
-    background: rgba(255, 255, 255, 1);
-    background: linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(255,255,255,0.50) 95%,rgba(234,238,240,1) 100%);
+    border-bottom: 1px solid #d0dbe0;
 }
 
 /* progress bars */
@@ -640,7 +648,7 @@ md-progress-linear > div {
 
 #select-template-button {
     position: absolute;
-    top: 66px;
+    top: 0px;
     left: 135px;
     cursor: pointer;
     overflow: hidden;
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 31d82c388b..03c49cd3af 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
@@ -26,11 +26,10 @@
 }
 
 #add-process-group-configuration-controller-service {
-    float: right;
     margin-top: 4px;
-    cursor: pointer;
-    font-size: 16px;
-    text-transform: uppercase;
+    position: absolute;
+    top: 0px;
+    right: 0px;
 }
 
 /* settings tabs */
@@ -39,6 +38,11 @@
     float: left;
 }
 
+#process-group-configuration-tabs-content {
+    top: 53px;
+    bottom: 52px;
+}
+
 #process-group-refresh-container {
     position: absolute;
     bottom: 20px;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
index 24508458d2..36fabda429 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
@@ -29,7 +29,6 @@
 }
 
 #processor-details div.details-tab {
-    height: 330px;
     display: none;
 }
 
@@ -43,7 +42,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     padding: 2px 2px 0;
-    width: 376px;
 }
 
 #processor-details div.relationship-name {
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 c7e6cd1253..b80c06d2e8 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
@@ -110,7 +110,7 @@ input.provenance-filter-list {
 #provenance-search-container {
     float: right;
     position: relative;
-    top: -38px;
+    top: 42px;
 }
 
 #provenance-search-button {
@@ -131,7 +131,6 @@ input.provenance-filter-list {
 /* provenance search dialog */
 
 #searchable-fields-container {
-    width: 100%;
     min-height: 185px;
     padding: 5px;
     overflow: auto;
@@ -334,12 +333,13 @@ div.content-detail-value {
 
 #provenance-table {
     position: absolute;
-    top: 78px;
+    top: 88px;
     left: 0px;
     bottom: 48px;
     right: 0px;
     overflow: hidden;
     background-color: #fff;
+    min-height: 150px;
 }
 
 /* provenance lineage */
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 7f49d25780..bcc0425a7d 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
@@ -67,6 +67,7 @@
     left: 0px;
     bottom: 68px;
     right: 0px;
+    min-height: 150px;
 }
 
 /* queue listing table */
@@ -93,7 +94,7 @@ div.flowfile-header {
     font-family: 'Roboto Slab';
     font-style: normal;
     font-weight: bold;
-    line-height: 56px;
+    padding-bottom: 20px;
     text-overflow: ellipsis;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css
index 6cae4bd064..44a6027737 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css
@@ -81,8 +81,7 @@ div.remote-port-header {
 div.remote-ports-container {
     padding: 5px;
     overflow-y: auto;
-    overflow-x: hidden;
-    height: 335px;
+    overflow-x: auto;
     border: 1px solid #666;
 }
 
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 47388792a9..dff087561d 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
@@ -33,13 +33,17 @@ div.settings-header-text {
 }
 
 div.settings-container {
-    margin-top: 18px;
-    height: 85%;
+    position: absolute;
+    top: 58px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
 }
 
 #new-service-or-task {
-    float: right;
-    cursor: pointer;
+    position: absolute;
+    top: 0px;
+    right: 0px;
 }
 
 #settings-refresh-container {
@@ -53,12 +57,18 @@ div.settings-tabs {
     float: left;
 }
 
+#settings-tabs-content {
+    top: 53px;
+    bottom: 48px;
+}
+
 div.settings-table {
     position: absolute;
-    top: 111px;
+    top: 0px;
     left: 0px;
-    bottom: 72px;
+    bottom: 20px;
     right: 0px;
+    min-height: 150px;
 }
 
 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 332107ec3a..63def4d203 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
@@ -30,8 +30,13 @@
 
 #shell-container {
     background: #fff;
-    box-shadow: 0 5px 8px rgba(0,0,0,0.30);
     padding: 20px;
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    overflow: hidden;
 }
 
 #shell-close-container {
@@ -74,4 +79,5 @@ div.close-hover {
     right: 0px;
     bottom: 0px;
     left: 0px;
+    overflow: hidden;
 }
\ 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/status-history.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
index 511fa78cea..8643a9a7c3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
@@ -63,7 +63,6 @@
 
 #status-history-container {
     float: left;
-    margin-bottom: 30px;
 }
 
 #status-history-chart-container {
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 6398715440..483a0248d6 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
@@ -121,8 +121,8 @@ input.search-nodes {
 
 #system-diagnostics-refresh-container{
     position: absolute;
-    top: 66px;
-    right: 20px;
+    top: 0px;
+    right: 0px;
 }
 
 #system-diagnostics-loading-container {
@@ -228,6 +228,14 @@ div.storage-usage-progressbar div.ui-progressbar-value {
     float: left;
 }
 
+#summary-tabs-content {
+    top: 80px;
+}
+
+#summary-filter-controls {
+    z-index: 1;
+}
+
 .summary-tab {
     display: block;
     padding: 0 5px;
@@ -267,12 +275,13 @@ div.storage-usage-progressbar div.ui-progressbar-value {
 
 div.summary-table {
     position: absolute;
-    top: 151px;
+    top: 70px;
     left: 0px;
     bottom: 48px;
     right: 0px;
     overflow: hidden;
     background-color: #fff;
+    min-height: 150px;
 }
 
 span.sorted {
@@ -288,9 +297,14 @@ span.sorted {
 /* cluster processor summary table */
 
 #cluster-processor-summary-table {
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-processor-summary-header {
@@ -349,9 +363,14 @@ span.sorted {
 /* cluster input port summary table */
 
 #cluster-input-port-summary-table {
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-input-port-summary-header {
@@ -411,9 +430,14 @@ span.sorted {
 /* cluster output port summary table */
 
 #cluster-output-port-summary-table {
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-output-port-summary-header {
@@ -473,9 +497,14 @@ span.sorted {
 /* cluster remote process group summary table */
 
 #cluster-remote-process-group-summary-table {
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-remote-process-group-summary-header {
@@ -533,10 +562,14 @@ span.sorted {
 /* cluster connection summary table */
 
 #cluster-connection-summary-table {
-    width: 100%;
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-connection-summary-header {
@@ -595,9 +628,14 @@ span.sorted {
 /* cluster process group summary table */
 
 #cluster-process-group-summary-table {
+    position: absolute;
+    top: 70px;
+    left: 0px;
+    bottom: 48px;
+    right: 0px;
     overflow: hidden;
-    height: 80%;
-    width: 100%;
+    background-color: #fff;
+    min-height: 150px;
 }
 
 #cluster-process-group-summary-header {
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 762fdf581a..a7a980bba1 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
@@ -98,4 +98,5 @@ input.templates-filter-list {
     left: 0px;
     bottom: 47px;
     right: 0px;
+    min-height: 150px;
 }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
index 106b6bbabc..d4ad1a6148 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
@@ -22,6 +22,9 @@
     background-color: #ffffff;
     box-shadow: 0 5px 8px rgba(0,0,0,0.30);
     overflow: hidden;
+    position: absolute;
+    top: 0px;
+    left: 0px;
 }
 
 .small-dialog {
@@ -73,8 +76,14 @@
 }
 
 .dialog-content {
-    padding: 10px 20px 20px 20px;
-    overflow: auto;
+    position: absolute;
+    top: 66px;
+    bottom: 52px;
+    left: 20px;
+    right: 20px;
+    overflow-y: auto;
+    /*padding: 10px 20px 20px 20px;*/
+    /*overflow: auto;*/
 }
 
 .dialog-buttons {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
index fef90b3e9a..9a1c051818 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
@@ -23,6 +23,7 @@
  *   header: true,
  *   footer: true,
  *   headerText: 'Dialog Header',
+ *   scrollableContentStyle: 'scrollable',
  *   buttons: [{
  *      buttonText: 'Cancel',
  *          color: {
@@ -45,7 +46,8 @@
  *      }
  *   }],
  *   handler: {
- *      close: closeHandler
+ *      close: closeHandler,
+ *      open: openHandler
  *   }
  * }
  *
@@ -156,9 +158,28 @@
                         dialog.prepend(dialogHeader);
                     }
 
+                    var nfDialog = {};
+                    if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                        nfDialog = dialog.data('nf-dialog');
+                    }
+
                     // save the close handler
                     if (isDefinedAndNotNull(options.handler)) {
-                        dialog.data('handler', options.handler);
+                        if (isDefinedAndNotNull(options.handler.close)) {
+                            nfDialog.close = options.handler.close;
+                        }
+                    }
+
+                    // save the open handler
+                    if (isDefinedAndNotNull(options.handler)) {
+                        if (isDefinedAndNotNull(options.handler.open)) {
+                            nfDialog.open = options.handler.open;
+                        }
+                    }
+
+                    // save the scrollable class name
+                    if (isDefinedAndNotNull(options.scrollableContentStyle)) {
+                        nfDialog.scrollableContentStyle = options.scrollableContentStyle;
                     }
 
                     // determine if dialog needs footer/buttons
@@ -166,6 +187,9 @@
                         // add the buttons
                         addButtons(dialog, options.buttons);
                     }
+
+                    //persist data attribute
+                    dialog.data('nfDialog', nfDialog);
                 }
             });
         },
@@ -175,9 +199,36 @@
          *
          * @argument {function} handler The function to call when hiding the dialog
          */
-        setHandler: function (handler) {
-            return this.each(function () {
-                $(this).data('handler', handler);
+        setCloseHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialog = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialog = $(dialog).data('nf-dialog');
+                }
+                nfDialog.close = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialog);
+            });
+        },
+
+        /**
+         * Sets the handler that is used when the dialog is opened.
+         *
+         * @argument {function} handler The function to call when showing the dialog
+         */
+        setOpenHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialog = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialog = $(dialog).data('nf-dialog');
+                }
+                nfDialog.open = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialog);
             });
         },
 
@@ -211,12 +262,168 @@
             });
         },
 
+        resize: function () {
+            var dialog = $(this);
+            var dialogContent = dialog.find('.dialog-content');
+
+            var nfDialog = {};
+            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                nfDialog = dialog.data('nf-dialog');
+            }
+
+            //initialize responsive properties
+            if (!isDefinedAndNotNull(nfDialog.responsive)) {
+                nfDialog.responsive = {};
+
+                if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
+                    nfDialog.responsive.x = true;
+                }
+
+                if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
+                    nfDialog.responsive.y = true;
+                }
+            } else {
+                if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
+                    nfDialog.responsive.x = true;
+                } else {
+                    nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
+                }
+
+                if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
+                    nfDialog.responsive.y = true;
+                } else {
+                    nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
+                }
+            }
+
+            if (!isDefinedAndNotNull(nfDialog.resizable)) {
+                nfDialog.resizable = false;
+            } else {
+                nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
+            }
+
+            if(nfDialog.resizable){
+                dialogContent.css({
+                    'position': 'static',
+                    'padding': '10px 20px 52px 20px'
+                });
+            }
+
+            if (nfDialog.responsive.y || nfDialog.responsive.x) {
+
+                var fullscreenHeight;
+                var fullscreenWidth;
+
+                if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
+                    fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
+                } else {
+                    nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
+
+                    fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
+                }
+
+                if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) {
+                    fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
+                } else {
+                    nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px';
+
+                    fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
+                }
+
+                if (!isDefinedAndNotNull(nfDialog.width)) {
+                    nfDialog.width = dialog.css('width');
+                }
+
+                if (!isDefinedAndNotNull(nfDialog['min-width'])) {
+                    if (parseInt(dialog.css('min-width'), 10) > 0) {
+                        nfDialog['min-width'] = dialog.css('min-width');
+                    } else {
+                        nfDialog['min-width'] = nfDialog.width;
+                    }
+                }
+
+                //min-width should always be set in terms of px
+                if (nfDialog['min-width'].indexOf("%") > 0) {
+                    nfDialog['min-width'] = ($(window).width() * (parseInt(nfDialog['min-width'], 10) / 100)) + 'px';
+                }
+
+                if (!isDefinedAndNotNull(nfDialog.height)) {
+                    nfDialog.height = dialog.css('height');
+                }
+
+                if (!isDefinedAndNotNull(nfDialog['min-height'])) {
+                    if (parseInt(dialog.css('min-height'), 10) > 0) {
+                        nfDialog['min-height'] = dialog.css('min-height');
+                    } else {
+                        nfDialog['min-height'] = nfDialog.height;
+                    }
+                }
+
+                //min-height should always be set in terms of px
+                if (nfDialog['min-height'].indexOf("%") > 0) {
+                    nfDialog['min-height'] = ($(window).height() * (parseInt(nfDialog['min-height'], 10) / 100)) + 'px';
+                }
+
+                //resize dialog
+                if ($(window).height() < fullscreenHeight) {
+                    if (nfDialog.responsive.y) {
+                        dialog.css('height', '100%');
+                        dialog.css('min-height', '100%');
+                    }
+                } else {
+                    //set the dialog min-height
+                    dialog.css('min-height', nfDialog['min-height']);
+                    if (nfDialog.responsive.y) {
+                        //make sure nfDialog.height is in terms of %
+                        if (nfDialog.height.indexOf("px") > 0) {
+                            nfDialog.height = (parseInt(nfDialog.height, 10) / $(window).height() * 100) + '%';
+                        }
+                        dialog.css('height', nfDialog.height);
+                    }
+                }
+
+                if ($(window).width() < fullscreenWidth) {
+                    if (nfDialog.responsive.x) {
+                        dialog.css('width', '100%');
+                        dialog.css('min-width', '100%');
+                    }
+                } else {
+                    //set the dialog width
+                    dialog.css('min-width', nfDialog['min-width']);
+                    if (nfDialog.responsive.x) {
+                        //make sure nfDialog.width is in terms of %
+                        if (nfDialog.width.indexOf("px") > 0) {
+                            nfDialog.width = (parseInt(nfDialog.width, 10) / $(window).width() * 100) + '%';
+                        }
+                        dialog.css('width', nfDialog.width);
+                    }
+                }
+
+                dialog.center();
+
+                //persist data attribute
+                dialog.data('nfDialog', nfDialog);
+            }
+
+            //apply scrollable style if applicable
+            if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
+                // your element has overflow
+                if (isDefinedAndNotNull(nfDialog.scrollableContentStyle)) {
+                    dialogContent.addClass(nfDialog.scrollableContentStyle);
+                }
+            } else {
+                // your element doesn't have overflow
+                if (isDefinedAndNotNull(nfDialog.scrollableContentStyle)) {
+                    dialogContent.removeClass(nfDialog.scrollableContentStyle);
+                }
+            }
+        },
+
         /**
          * Shows the dialog.
          */
         show: function () {
             var dialog = $(this);
-            var dialogContent = dialog.find('.dialog-content');
 
             var zIndex = dialog.css('z-index');
             if (zIndex === 'auto') {
@@ -233,7 +440,7 @@
                     var index;
                     return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index;
                 });
-                //Add 2 so that we have room for the modalGlass of the new dialog
+                //Add 2 so that we have room for the glass pane overlay of the new dialog
                 zIndex = Math.max.apply(null, zVals) + 2;
             }
             dialog.css('z-index', zIndex);
@@ -243,15 +450,15 @@
                 nfDialog = dialog.data('nf-dialog');
             }
 
-            // determine if dialog needs a glasspane
+            // determine if dialog needs a glass pane overlay
             var hasGlasspane;
             if (isDefinedAndNotNull(nfDialog.glasspane)) {
                 hasGlasspane = nfDialog.glasspane;
             } else {
-                hasGlasspane = true;
+                nfDialog.glasspane = hasGlasspane = true;
             }
 
-            //create glasspane overlay
+            //create glass pane overlay
             if(hasGlasspane && (top === window)) {
                 // build the dialog modal
                 var modalGlassMarkup = '<div data-nf-dialog-parent="' + dialog.attr('id') + '" class="modal-glass"></div>';
@@ -261,169 +468,21 @@
                 modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
             }
 
-            var resize = function () {
-                //initialize responsive properties
-                if (!isDefinedAndNotNull(nfDialog.responsive)) {
-                    nfDialog.responsive = {};
-
-                    if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
-                        nfDialog.responsive.x = true;
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
-                        nfDialog.responsive.y = true;
-                    }
-                } else {
-                    if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
-                        nfDialog.responsive.x = true;
-                    } else {
-                        nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
-                        nfDialog.responsive.y = true;
-                    } else {
-                        nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
-                    }
-                }
-
-                if (!isDefinedAndNotNull(nfDialog.resizable)) {
-                    nfDialog.resizable = false;
-                } else {
-                    nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
-                }
-
-                if (nfDialog.responsive.y || nfDialog.responsive.x) {
-
-                    var fullscreenHeight;
-                    var fullscreenWidth;
-
-                    if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
-                        fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
-                    } else {
-                        nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
-
-                        fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
-                    }
-
-                    if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) {
-                        fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
-                    } else {
-                        nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px';
-
-                        fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog.width)) {
-                        nfDialog.width = dialog.css('width');
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog['min-width'])) {
-                        if (parseInt(dialog.css('min-width'), 10) > 0) {
-                            nfDialog['min-width'] = dialog.css('min-width');
-                        } else {
-                            nfDialog['min-width'] = nfDialog.width;
-                        }
-                    }
-
-                    //min-width should always be set in terms of px
-                    if (nfDialog['min-width'].indexOf("%") > 0) {
-                        nfDialog['min-width'] = ($(window).width() * (parseInt(nfDialog['min-width'], 10) / 100)) + 'px';
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog.height)) {
-                        nfDialog.height = dialog.css('height');
-                    }
-
-                    if (!isDefinedAndNotNull(nfDialog['min-height'])) {
-                        if (parseInt(dialog.css('min-height'), 10) > 0) {
-                            nfDialog['min-height'] = dialog.css('min-height');
-                        } else {
-                            nfDialog['min-height'] = nfDialog.height;
-                        }
-                    }
-
-                    //min-height should always be set in terms of px
-                    if (nfDialog['min-height'].indexOf("%") > 0) {
-                        nfDialog['min-height'] = ($(window).height() * (parseInt(nfDialog['min-height'], 10) / 100)) + 'px';
-                    }
-
-                    //resize dialog
-                    if ($(window).height() < fullscreenHeight) {
-                        if (nfDialog.responsive.y) {
-                            dialog.css('height', '100%');
-                            dialog.css('min-height', '100%');
-                        }
-                    } else {
-                        //set the dialog min-height
-                        dialog.css('min-height', nfDialog['min-height']);
-                        if (nfDialog.responsive.y) {
-                            //make sure nfDialog.height is in terms of %
-                            if (nfDialog.height.indexOf("px") > 0) {
-                                nfDialog.height = (parseInt(nfDialog.height, 10) / $(window).height() * 100) + '%';
-                            }
-                            dialog.css('height', nfDialog.height);
-                        }
-                    }
-
-                    if ($(window).width() < fullscreenWidth) {
-                        if (nfDialog.responsive.x) {
-                            dialog.css('width', '100%');
-                            dialog.css('min-width', '100%');
-                        }
-                    } else {
-                        //set the dialog width
-                        dialog.css('min-width', nfDialog['min-width']);
-                        if (nfDialog.responsive.x) {
-                            //make sure nfDialog.width is in terms of %
-                            if (nfDialog.width.indexOf("px") > 0) {
-                                nfDialog.width = (parseInt(nfDialog.width, 10) / $(window).width() * 100) + '%';
-                            }
-                            dialog.css('width', nfDialog.width);
-                        }
-                    }
-
-                    dialog.center();
-
-                    //persist data attribute
-                    dialog.data('nfDialog', nfDialog);
-                }
-
-                //resize dialog content
-                if (!nfDialog.resizable) {
-                    dialogContent.attr('style', 'height:' +
-                        (dialog.outerHeight() -
-                        dialog.find('.dialog-header').height() -
-                        dialog.find('.dialog-buttons').height() -
-                        parseInt(dialogContent.css('padding-top'), 10) -
-                        parseInt(dialogContent.css('padding-bottom'), 10) + 'px'));
-
-                    if (dialogContent[0].offsetHeight < dialogContent[0].scrollHeight) {
-                        // your element have overflow
-                        dialogContent.addClass('scrollable');
-                        dialog.find('.dialog-buttons').css('background', '#eaeef0');
-                    } else {
-                        // your element doesn't have overflow
-                        dialogContent.removeClass('scrollable');
-                        dialog.find('.dialog-buttons').css('background', '#fff');
-                    }
-                }
-            };
-
-            // listen for browser resize events to resize and center the dialog
-            $(window).resize(function () {
-                resize();
-
-                dialog.trigger("dialog:resize");
-            });
+            //persist data attribute
+            dialog.data('nfDialog', nfDialog);
 
             return this.each(function () {
                 // show the dialog
                 if (!dialog.is(':visible')) {
-                    // center and show the dialog
-                    dialog.center().show();
+                    dialog.show();
+                    dialog.modal('resize');
+                    dialog.center();
 
-                    resize();
+                    // invoke the handler
+                    var handler = dialog.data('nf-dialog').open;
+                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                        handler.call(dialog);
+                    }
                 }
             });
         },
@@ -435,16 +494,16 @@
             return this.each(function () {
                 var dialog = $(this);
                 if (dialog.is(':visible')) {
-                    // remove the modal backgroun
+                    // remove the modal glass pane overlay
                     $('body').find("[data-nf-dialog-parent='" + dialog.attr('id') + "']").remove();
 
                     // hide the dialog
                     dialog.hide();
 
                     // invoke the handler
-                    var handler = dialog.data('handler');
-                    if (isDefinedAndNotNull(handler) && typeof handler.close === 'function') {
-                        handler.close.call(dialog);
+                    var handler = dialog.data('nf-dialog').close;
+                    if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                        handler.call(dialog);
                     }
                 }
             });
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 8cbd057079..499cb80af8 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
@@ -44,10 +44,12 @@ div.add-property-text {
 }
 
 div.property-table {
-    width: 100%;
+    position: absolute;
+    top: 43px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
     min-height: 150px;
-    overflow: hidden;
-    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/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
index aba2841b7f..122e998114 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
@@ -923,6 +923,7 @@
 
                 newControllerServiceDialog.modal({
                     headerText: 'Add Controller Service',
+                    scrollableContentStyle: 'scrollable',
                     buttons: [{
                         buttonText: 'Create',
                         color: {
@@ -1492,6 +1493,7 @@
 
                         newPropertyDialog.modal({
                             headerText: 'Add Property',
+                            scrollableContentStyle: 'scrollable',
                             buttons: [{
                                 buttonText: 'Ok',
                                 color: {
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 e005adc499..9e5ac33354 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
@@ -64,13 +64,28 @@ div.configuration-tab {
 }
 
 div[id$=-tabs-content] {
-    height: 85%;
+    overflow: auto;
+    position: absolute;
+    top: 33px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
 }
 
 div[id$=-tab-content] {
-    height: 100%;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+    padding-top: 10px;
 }
 
 div[id$=-properties] {
-    height: 100%;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0px;
+    padding-top: 10px;
 }
\ 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/jquery/tabbs/jquery.tabbs.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
index e3bbb5166a..fdd59d47b9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
@@ -44,8 +44,8 @@
      *   }],
      *   select: selectHandler
      * }
-     * 
-     * @argument {object} options 
+     *
+     * @argument {object} options
      */
     $.fn.tabbs = function (options) {
         return this.each(function () {
@@ -62,7 +62,7 @@
                 var tabDefinition = this;
 
                 // mark the tab content
-                $('#' + tabDefinition.tabContentId).addClass(tabContentStyle);
+                $('#' + tabDefinition.tabContentId).addClass(tabContentStyle).hide();
 
                 // prep the tab itself
                 var tab = $('<li></li>').text(tabDefinition.name).addClass(options.tabStyle).click(function () {
@@ -70,7 +70,16 @@
                     $('.' + tabContentStyle).hide();
 
                     // show the desired tab
-                    $('#' + tabDefinition.tabContentId).show();
+                    var tabContent = $('#' + tabDefinition.tabContentId).show();
+
+                    // check if content has overflow
+                    var tabContentContainer = tabContent.parent();
+                    if (tabContentContainer.get(0).offsetHeight < tabContentContainer.get(0).scrollHeight ||
+                        tabContentContainer.get(0).offsetWidth < tabContentContainer.get(0).scrollWidth) {
+                        tabContentContainer.addClass(options.scrollableTabContentStyle);
+                    } else {
+                        tabContentContainer.removeClass(options.scrollableTabContentStyle);
+                    }
 
                     // unselect the previously selected tab
                     tabList.children('.' + options.tabStyle).removeClass(options.selectedTabStyle);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
index 0d00e278a9..2309020fd8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
@@ -124,14 +124,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                  */
                 launch: function () {
                     if (nf.Common.canAccessController()) {
-                        nf.Settings.showSettings().done(function() {
-                            $('#settings-refresh-container').width($('#shell').width());
-                            
-                            // add a shell:resize listener
-                            $('#shell').on('shell:resize', function () {
-                                $('#settings-refresh-container').width($('#shell').width());
-                            });
-                        });
+                        nf.Settings.showSettings();
                     }
                 }
             }
@@ -297,6 +290,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                     var self = this;
 
                     this.getElement().modal({
+                        scrollableContentStyle: 'scrollable',
                         headerText: 'About Apache NiFi',
                         buttons: [{
                             buttonText: 'Ok',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
index cb329bab76..0f03386f7c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-operate-controller.js
@@ -58,6 +58,7 @@ nf.ng.Canvas.OperateCtrl = function () {
                 init: function () {
                     // configure the create template dialog
                     this.getElement().modal({
+                        scrollableContentStyle: 'scrollable',
                         headerText: 'Create Template'
                     });
                 },
@@ -250,6 +251,7 @@ nf.ng.Canvas.OperateCtrl = function () {
                 init: function () {
                     // configure the create fillcolor dialog
                     this.getElement().modal({
+                        scrollableContentStyle: 'scrollable',
                         headerText: 'Change Color',
                         buttons: [{
                             buttonText: 'Apply',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
index fb08a9d030..bc3dae3466 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-group-component.js
@@ -89,6 +89,7 @@ nf.ng.GroupComponent = function (serviceProvider) {
             init: function () {
                 // configure the new process group dialog
                 this.getElement().modal({
+                    scrollableContentStyle: 'scrollable',
                     headerText: 'Add Process Group',
                     handler: {
                         close: function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
index 287a10e4ab..1adc5cbf73 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-input-port-component.js
@@ -89,6 +89,7 @@ nf.ng.InputPortComponent = function (serviceProvider) {
             init: function () {
                 // configure the new port dialog
                 this.getElement().modal({
+                    scrollableContentStyle: 'scrollable',
                     headerText: 'Add Port',
                     handler: {
                         close: function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
index 9514874e70..78d5b62504 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js
@@ -415,6 +415,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
 
                 // configure the new processor dialog
                 this.getElement().modal({
+                    scrollableContentStyle: 'scrollable',
                     headerText: 'Add Processor'
                 });
             },
@@ -561,7 +562,7 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
                 }]);
 
             // set a new handler for closing the the dialog
-            this.modal.update('setHandler', {
+            this.modal.update('setCloseHandler', {
                 close: function () {
                     // remove the handler
                     grid.onDblClick.unsubscribe(gridDoubleClick);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
index 77ddfa4862..6de3e1f4ef 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-remote-process-group-component.js
@@ -119,6 +119,7 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
                 var defaultYieldDuration = "10 sec";
                 // configure the new remote process group dialog
                 this.getElement().modal({
+                    scrollableContentStyle: 'scrollable',
                     headerText: 'Add Remote Process Group',
                     handler: {
                         close: function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
index b332c5b3b0..fad33247f9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-template-component.js
@@ -76,6 +76,7 @@ nf.ng.TemplateComponent = function (serviceProvider) {
             init: function () {
                 // configure the instantiate template dialog
                 this.getElement().modal({
+                    scrollableContentStyle: 'scrollable',
                     headerText: 'Add Template',
                     overlayBackgroud: false
                 });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
index 3cd8c558f6..593ac3f058 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js
@@ -35,6 +35,7 @@ nf.Actions = (function () {
 
         // configure the drop request status dialog
         $('#drop-request-status-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             handler: {
                 close: function () {
                     // reset the progress bar
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 ed9327ea4a..d83c60a652 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
@@ -134,7 +134,7 @@ nf.Canvas = (function () {
             cluster: '../nifi-api/controller/cluster'
         }
     };
-    
+
     /**
      * Starts polling.
      *
@@ -299,42 +299,42 @@ nf.Canvas = (function () {
 
         // handle canvas events
         svg.on('mousedown.selection', function () {
-                canvasClicked = true;
+            canvasClicked = true;
 
-                if (d3.event.button !== 0) {
-                    // prevent further propagation (to parents and others handlers
-                    // on the same element to prevent zoom behavior)
-                    d3.event.stopImmediatePropagation();
-                    return;
-                }
+            if (d3.event.button !== 0) {
+                // prevent further propagation (to parents and others handlers
+                // on the same element to prevent zoom behavior)
+                d3.event.stopImmediatePropagation();
+                return;
+            }
 
-                // show selection box if shift is held down
-                if (d3.event.shiftKey) {
-                    var position = d3.mouse(canvas.node());
-                    canvas.append('rect')
-                        .attr('rx', 6)
-                        .attr('ry', 6)
-                        .attr('x', position[0])
-                        .attr('y', position[1])
-                        .attr('class', 'selection')
-                        .attr('width', 0)
-                        .attr('height', 0)
-                        .attr('stroke-width', function () {
-                            return 1 / nf.Canvas.View.scale();
-                        })
-                        .attr('stroke-dasharray', function () {
-                            return 4 / nf.Canvas.View.scale();
-                        })
-                        .datum(position);
+            // show selection box if shift is held down
+            if (d3.event.shiftKey) {
+                var position = d3.mouse(canvas.node());
+                canvas.append('rect')
+                    .attr('rx', 6)
+                    .attr('ry', 6)
+                    .attr('x', position[0])
+                    .attr('y', position[1])
+                    .attr('class', 'selection')
+                    .attr('width', 0)
+                    .attr('height', 0)
+                    .attr('stroke-width', function () {
+                        return 1 / nf.Canvas.View.scale();
+                    })
+                    .attr('stroke-dasharray', function () {
+                        return 4 / nf.Canvas.View.scale();
+                    })
+                    .datum(position);
 
-                    // prevent further propagation (to parents and others handlers
-                    // on the same element to prevent zoom behavior)
-                    d3.event.stopImmediatePropagation();
+                // prevent further propagation (to parents and others handlers
+                // on the same element to prevent zoom behavior)
+                d3.event.stopImmediatePropagation();
 
-                    // prevents the browser from changing to a text selection cursor
-                    d3.event.preventDefault();
-                }
-            })
+                // prevents the browser from changing to a text selection cursor
+                d3.event.preventDefault();
+            }
+        })
             .on('mousemove.selection', function () {
                 // update selection box if shift is held down
                 if (d3.event.shiftKey) {
@@ -451,7 +451,7 @@ nf.Canvas = (function () {
             });
             svg.attr({
                 'height': canvasContainer.height(),
-                'width': canvasContainer.width()
+                'width': $(window).width()
             });
 
             //breadcrumbs
@@ -478,15 +478,48 @@ nf.Canvas = (function () {
                 updateGraphSize();
                 updateFlowStatusContainerSize();
 
-                // resize grids when appropriate
-                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]));
+                // resize shell when appropriate
+                var shell = $('#shell-dialog');
+                if (shell.is(':visible')){
+                    setTimeout(function(shell){
+                        nf.Shell.resizeContent(shell);
+                        if(shell.find('#shell-iframe').is(':visible')) {
+                            nf.Shell.resizeIframe(shell);
+                        }
+                    }, 50, shell);
+                }
+
+                // resize dialogs when appropriate
+                var dialogs = $('.dialog');
+                for (var i = 0, len = dialogs.length; i < len; i++) {
+                    if ($(dialogs[i]).is(':visible')){
+                        setTimeout(function(dialog){
+                            dialog.modal('resize');
+                        }, 50, $(dialogs[i]));
                     }
                 }
+
+                // resize grids when appropriate
+                var gridElements = $('*[class*="slickgrid_"]');
+                for (var j = 0, len = gridElements.length; j < len; j++) {
+                    if ($(gridElements[j]).is(':visible')){
+                        setTimeout(function(gridElement){
+                            gridElement.data('gridInstance').resizeCanvas();
+                        }, 50, $(gridElements[j]));
+                    }
+                }
+
+                // toggle tabs .scrollable when appropriate
+                var tabsContainers = $('.tab-container');
+                var tabsContents = [];
+                for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                    if ($(tabsContainers[k]).is(':visible')){
+                        tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                    }
+                }
+                $.each(tabsContents, function (index, tabsContent) {
+                    nf.Common.toggleScrollable(tabsContent.get(0));
+                });
             }
         }).on('keydown', function (evt) {
             // if a dialog is open, disable canvas shortcuts
@@ -606,7 +639,7 @@ nf.Canvas = (function () {
 
             // update the access policies
             accessPolicy = flowResponse.accessPolicy;
-            
+
             // update the breadcrumbs
             nf.ng.Bridge.injector.get('breadcrumbsCtrl').resetBreadcrumbs();
             nf.ng.Bridge.injector.get('breadcrumbsCtrl').generateBreadcrumbs(breadcrumb);
@@ -746,7 +779,7 @@ nf.Canvas = (function () {
             userXhr.done(function () {
                 // load the client id
                 var clientXhr = nf.Client.init();
-                
+
                 // get the controller config to register the status poller
                 var configXhr = $.ajax({
                     type: 'GET',
@@ -898,10 +931,10 @@ nf.Canvas = (function () {
                 return accessPolicy.canRead === true;
             }
         },
-        
+
         /**
          * Whether the current user can write in this group.
-         * 
+         *
          * @returns {boolean}   can write
          */
         canWrite: function () {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
index b18a2fa6ab..fd573030c6 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-component-state.js
@@ -224,6 +224,7 @@ nf.ComponentState = (function () {
 
             // initialize the processor configuration dialog
             $('#component-state-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Component State',
                 buttons: [{
                     buttonText: 'Close',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
index e6593cd240..b2ca3f82e8 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js
@@ -1123,11 +1123,15 @@ nf.ConnectionConfiguration = (function () {
 
             // initialize the configure connection dialog
             $('#connection-configuration').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Configure Connection',
                 handler: {
                     close: function () {
                         // reset the dialog on close
                         resetDialog();
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
@@ -1136,6 +1140,7 @@ nf.ConnectionConfiguration = (function () {
             $('#connection-configuration-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Details',
                     tabContentId: 'connection-details-tab-content'
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
index 5f1954b88f..e92d2cec1c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
@@ -1523,6 +1523,7 @@ nf.ControllerService = (function () {
             $('#controller-service-configuration-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Settings',
                     tabContentId: 'controller-service-standard-settings-tab-content'
@@ -1554,6 +1555,7 @@ nf.ControllerService = (function () {
             // initialize the conroller service configuration dialog
             $('#controller-service-configuration').modal({
                 headerText: 'Configure Controller Service',
+                scrollableContentStyle: 'scrollable',
                 handler: {
                     close: function () {
                         // empty the referencing components list
@@ -1573,6 +1575,9 @@ nf.ControllerService = (function () {
 
                         // removed the cached controller service details
                         $('#controller-service-configuration').removeData('controllerServiceDetails');
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
@@ -1580,6 +1585,7 @@ nf.ControllerService = (function () {
             // initialize the disable service dialog
             $('#disable-controller-service-dialog').modal({
                 headerText: 'Disable Controller Service',
+                scrollableContentStyle: 'scrollable',
                 handler: {
                     close: function () {
                         var disableDialog = $(this);
@@ -1624,6 +1630,7 @@ nf.ControllerService = (function () {
             // initialize the enable service dialog
             $('#enable-controller-service-dialog').modal({
                 headerText: 'Enable Controller Service',
+                scrollableContentStyle: 'scrollable',
                 handler: {
                     close: function () {
                         var enableDialog = $(this);
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
index 24c8a38e63..cba56afa45 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js
@@ -380,6 +380,7 @@ nf.ControllerServices = (function () {
         // initialize the controller service dialog
         $('#new-controller-service-dialog').modal({
             headerText: 'Add Controller Service',
+            scrollableContentStyle: 'scrollable',
             handler: {
                 close: function () {
                     // clear the selected row
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
index 4875e40985..79940094a9 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-go-to.js
@@ -322,6 +322,7 @@ nf.GoTo = (function () {
          */
         init: function () {
             $('#connections-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 buttons: [{
                     buttonText: 'Close',
                     color: {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
index 36d4c00ad8..ca2b39b854 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label-configuration.js
@@ -28,6 +28,7 @@ nf.LabelConfiguration = (function () {
         init: function () {
             // make the new property dialog draggable
             $('#label-configuration').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Configure Label',
                 buttons: [{
                     buttonText: 'Apply',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
index be8fb2307d..dfe22418db 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-configuration.js
@@ -24,6 +24,7 @@ nf.PortConfiguration = (function () {
      */
     var initPortConfigurationDialog = function () {
         $('#port-configuration').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Configure Port',
             buttons: [{
                 buttonText: 'Apply',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
index 5ca78c3560..0f8496d9d7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port-details.js
@@ -23,6 +23,7 @@ nf.PortDetails = (function () {
         init: function () {
             // configure the processor details dialog
             $('#port-details').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Port Details',
                 buttons: [{
                     buttonText: 'Ok',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
index 2e5f39d393..790c9f53c2 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-configuration.js
@@ -175,12 +175,6 @@ nf.ProcessGroupConfiguration = (function () {
         nf.Shell.showContent('#process-group-configuration').done(function () {
             reset();
         });
-        $('#process-group-refresh-container').width($('#shell').width());
-
-        // add a shell:resize listener
-        $('#shell').on('shell:resize', function () {
-            $('#process-group-refresh-container').width($('#shell').width());
-        });
 
         // adjust the table size
         nf.ProcessGroupConfiguration.resetTableSize();
@@ -207,6 +201,7 @@ nf.ProcessGroupConfiguration = (function () {
             $('#process-group-configuration-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'General',
                     tabContentId: 'general-process-group-configuration-tab-content'
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js
index 4db2f0edaf..019d3aa965 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group-details.js
@@ -23,6 +23,7 @@ nf.ProcessGroupDetails = (function () {
         init: function () {
             // configure the processor details dialog
             $('#process-group-details').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Process Group Details',
                 buttons: [{
                     buttonText: 'Ok',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
index e60699b5ee..a1602df23a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
@@ -456,6 +456,7 @@ nf.ProcessorConfiguration = (function () {
             $('#processor-configuration-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Settings',
                     tabContentId: 'processor-standard-settings-tab-content'
@@ -491,6 +492,7 @@ nf.ProcessorConfiguration = (function () {
 
             // initialize the processor configuration dialog
             $('#processor-configuration').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Configure Processor',
                 handler: {
                     close: function () {
@@ -502,6 +504,9 @@ nf.ProcessorConfiguration = (function () {
 
                         // removed the cached processor details
                         $('#processor-configuration').removeData('processorDetails');
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
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 aadc57bcdb..d6fa1ed2ad 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
@@ -41,6 +41,8 @@ nf.QueueListing = (function () {
 
         // configure the drop request status dialog
         $('#listing-request-status-dialog').modal({
+            scrollableContentStyle: 'scrollable',
+            headerText: 'Queue Listing',
             handler: {
                 close: function () {
                     // reset the progress bar
@@ -189,6 +191,7 @@ nf.QueueListing = (function () {
         $('#flowfile-details-tabs').tabbs({
             tabStyle: 'tab',
             selectedTabStyle: 'selected-tab',
+            scrollableTabContentStyle: 'scrollable',
             tabs: [{
                 name: 'Details',
                 tabContentId: 'flowfile-details-tab-content'
@@ -199,6 +202,7 @@ nf.QueueListing = (function () {
         });
 
         $('#flowfile-details-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'FlowFile',
             buttons: [{
                 buttonText: 'Ok',
@@ -219,6 +223,9 @@ nf.QueueListing = (function () {
                     $('#flowfile-attributes-container').empty();
                     $('#flowfile-cluster-node-id').text('');
                     $('#additional-flowfile-details').empty();
+                },
+                open: function () {
+                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 }
             }
         });
@@ -245,7 +252,7 @@ nf.QueueListing = (function () {
                 // update the progress bar
                 var label = $('<div class="progress-label"></div>').text(percentComplete + '%');
                 if (percentComplete > 0) {
-                    label.css('margin-top', '-19px');
+                    label.css('margin-top', '-24px');
                 }
                 progressBar.progressbar('value', percentComplete).append(label);
             };
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
index b6520591dc..63ded6bac7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-configuration.js
@@ -22,6 +22,7 @@ nf.RemoteProcessGroupConfiguration = (function () {
         init: function () {
             $('#remote-process-group-configuration').modal({
                 headerText: 'Configure Remote Process Group',
+                scrollableContentStyle: 'scrollable',
                 buttons: [{
                     buttonText: 'Apply',
                     color: {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
index f533d8390c..d757496f09 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-details.js
@@ -22,6 +22,7 @@ nf.RemoteProcessGroupDetails = (function () {
         init: function () {
             $('#remote-process-group-details').modal({
                 headerText: 'Remote Process Group Details',
+                scrollableContentStyle: 'scrollable',
                 buttons: [{
                     buttonText: 'Ok',
                     color: {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
index 9907c6c9c9..d91457eea7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group-ports.js
@@ -25,6 +25,7 @@ nf.RemoteProcessGroupPorts = (function () {
     var initRemotePortConfigurationDialog = function () {
         $('#remote-port-configuration').modal({
             headerText: 'Configure Remote Port',
+            scrollableContentStyle: 'scrollable',
             buttons: [{
                 buttonText: 'Apply',
                 color: {
@@ -146,6 +147,7 @@ nf.RemoteProcessGroupPorts = (function () {
      */
     var initRemoteProcessGroupConfigurationDialog = function () {
         $('#remote-process-group-ports').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Remote Process Group Ports',
             buttons: [{
                 buttonText: 'Close',
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 b736df9ef6..2cf66abaf6 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
@@ -305,6 +305,7 @@ nf.ReportingTask = (function () {
             $('#reporting-task-configuration-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Settings',
                     tabContentId: 'reporting-task-standard-settings-tab-content'
@@ -331,6 +332,7 @@ nf.ReportingTask = (function () {
 
             // initialize the reporting task configuration dialog
             $('#reporting-task-configuration').data('mode', config.edit).modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Configure Reporting Task',
                 handler: {
                     close: function () {
@@ -345,6 +347,9 @@ nf.ReportingTask = (function () {
 
                         // removed the cached reporting task details
                         $('#reporting-task-configuration').removeData('reportingTaskDetails');
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
index cca62cede8..6e3db6a53b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
@@ -530,6 +530,7 @@ nf.Settings = (function () {
 
         // initialize the reporting task dialog
         $('#new-reporting-task-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Add Reporting Task',
             buttons: [{
                     buttonText: 'Add',
@@ -954,6 +955,7 @@ nf.Settings = (function () {
             $('#settings-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'General',
                     tabContentId: 'general-settings-tab-content'
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
index 5d25e4e4fe..f5e8e903bb 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/cluster/nf-cluster-table.js
@@ -335,6 +335,7 @@ nf.ClusterTable = (function () {
         init: function () {
             // initialize the user details dialog
             $('#node-details-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Node Details',
                 buttons: [{
                     buttonText: 'Ok',
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 6a6b36daa9..c18b9b314f 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
@@ -158,8 +158,40 @@ nf.Counters = (function () {
                             setBodySize();
                         }).fail(nf.Common.handleAjaxError);
 
-                        // listen for browser resize events to reset the body size
-                        $(window).resize(setBodySize);
+                        $(window).on('resize', function (e) {
+                            setBodySize();
+                            // resize dialogs when appropriate
+                            var dialogs = $('.dialog');
+                            for (var i = 0, len = dialogs.length; i < len; i++) {
+                                if ($(dialogs[i]).is(':visible')){
+                                    setTimeout(function(dialog){
+                                        dialog.modal('resize');
+                                    }, 50, $(dialogs[i]));
+                                }
+                            }
+
+                            // resize grids when appropriate
+                            var gridElements = $('*[class*="slickgrid_"]');
+                            for (var j = 0, len = gridElements.length; j < len; j++) {
+                                if ($(gridElements[j]).is(':visible')){
+                                    setTimeout(function(gridElement){
+                                        gridElement.data('gridInstance').resizeCanvas();
+                                    }, 50, $(gridElements[j]));
+                                }
+                            }
+
+                            // toggle tabs .scrollable when appropriate
+                            var tabsContainers = $('.tab-container');
+                            var tabsContents = [];
+                            for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                                if ($(tabsContainers[k]).is(':visible')){
+                                    tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                                }
+                            }
+                            $.each(tabsContents, function (index, tabsContent) {
+                                nf.Common.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
                     });
                 });
             });
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 1892f7b078..299c6223fa 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
@@ -40,6 +40,7 @@ nf.HistoryTable = (function () {
      */
     var initDetailsDialog = function () {
         $('#action-details-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Action Details',
             buttons: [{
                 buttonText: 'Ok',
@@ -98,6 +99,7 @@ nf.HistoryTable = (function () {
 
         // configure the filter dialog
         $('#history-filter-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Filter History',
             buttons: [{
                 buttonText: 'Filter',
@@ -188,6 +190,7 @@ nf.HistoryTable = (function () {
 
         // configure the filter dialog
         $('#history-purge-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Purge History',
             buttons: [{
                 buttonText: 'Purge',
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 c6087bc884..b82d285bdc 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
@@ -157,8 +157,40 @@ nf.History = (function () {
                         setBodySize();
                     }).fail(nf.Common.handleAjaxError);
 
-                    // listen for browser resize events to reset the body size
-                    $(window).resize(setBodySize);
+                    $(window).on('resize', function (e) {
+                        setBodySize();
+                        // resize dialogs when appropriate
+                        var dialogs = $('.dialog');
+                        for (var i = 0, len = dialogs.length; i < len; i++) {
+                            if ($(dialogs[i]).is(':visible')){
+                                setTimeout(function(dialog){
+                                    dialog.modal('resize');
+                                }, 50, $(dialogs[i]));
+                            }
+                        }
+
+                        // resize grids when appropriate
+                        var gridElements = $('*[class*="slickgrid_"]');
+                        for (var j = 0, len = gridElements.length; j < len; j++) {
+                            if ($(gridElements[j]).is(':visible')){
+                                setTimeout(function(gridElement){
+                                    gridElement.data('gridInstance').resizeCanvas();
+                                }, 50, $(gridElements[j]));
+                            }
+                        }
+
+                        // toggle tabs .scrollable when appropriate
+                        var tabsContainers = $('.tab-container');
+                        var tabsContents = [];
+                        for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                            if ($(tabsContainers[k]).is(':visible')){
+                                tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                            }
+                        }
+                        $.each(tabsContents, function (index, tabsContent) {
+                            nf.Common.toggleScrollable(tabsContent.get(0));
+                        });
+                    });
                 });
             });
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
index 78729643a1..7c9951e72d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js
@@ -328,6 +328,23 @@ nf.Common = (function () {
             return $(selector).addClass(normalStyle);
         },
 
+        /**
+         * Determine if an `element` has content overflow and adds the `.scrollable` class if it does.
+         *
+         * @param {HTMLElement} element The DOM element to toggle .scrollable upon.
+         */
+        toggleScrollable: function (element) {
+            if ($(element).is(':visible')){
+                if (element.offsetHeight < element.scrollHeight ||
+                    element.offsetWidth < element.scrollWidth) {
+                    // your element has overflow
+                    $(element).addClass('scrollable');
+                } else {
+                    $(element).removeClass('scrollable');
+                }
+            }
+        },
+
         /**
          * Method for handling ajax errors.
          * 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
index d7fd6a8897..74c8ccf16c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-connection-details.js
@@ -293,6 +293,7 @@ nf.ConnectionDetails = (function () {
             $('#connection-details-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Details',
                     tabContentId: 'read-only-connection-details-tab-content'
@@ -305,6 +306,7 @@ nf.ConnectionDetails = (function () {
             // configure the connection details dialog
             $('#connection-details').modal({
                 headerText: 'Connection Details',
+                scrollableContentStyle: 'scrollable',
                 buttons: [{
                     buttonText: 'Ok',
                     color: {
@@ -345,6 +347,9 @@ nf.ConnectionDetails = (function () {
                         $('#read-only-back-pressure-object-threshold').text('');
                         $('#read-only-back-pressure-data-size-threshold').text('');
                         $('#read-only-prioritizers').empty();
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
index 486c3b7720..d90ead0120 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-dialog.js
@@ -20,6 +20,7 @@
 $(document).ready(function () {
     // configure the ok dialog
     $('#nf-ok-dialog').modal({
+        scrollableContentStyle: 'scrollable',
         handler: {
             close: function () {
                 // clear the content
@@ -33,6 +34,7 @@ $(document).ready(function () {
 
     // configure the yes/no dialog
     $('#nf-yes-no-dialog').modal({
+        scrollableContentStyle: 'scrollable',
         handler: {
             close: function () {
                 // clear the content and reset the button model
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
index 466cfd993b..f76adf6b8e 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
@@ -51,6 +51,7 @@ nf.ProcessorDetails = (function () {
             $('#processor-details-tabs').tabbs({
                 tabStyle: 'tab',
                 selectedTabStyle: 'selected-tab',
+                scrollableTabContentStyle: 'scrollable',
                 tabs: [{
                     name: 'Settings',
                     tabContentId: 'details-standard-settings-tab-content'
@@ -84,6 +85,7 @@ nf.ProcessorDetails = (function () {
             // configure the processor details dialog
             $('#processor-details').modal({
                 headerText: 'Processor Details',
+                scrollableContentStyle: 'scrollable',
                 handler: {
                     close: function () {
                         // empty the relationship list
@@ -108,6 +110,9 @@ nf.ProcessorDetails = (function () {
                         // removed the cached processor details
                         $('#processor-details').removeData('processorDetails');
                         $('#processor-details').removeData('processorHistory');
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 }
             });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
index 930f01989f..c2ecc49f52 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js
@@ -20,6 +20,7 @@
 $(document).ready(function () {
     // configure the dialog
     $('#shell-dialog').modal({
+        scrollableContentStyle: 'scrollable',
         header: false,
         footer: false
     });
@@ -49,6 +50,26 @@ nf.Shell = (function () {
     var showContentResize = null;
 
     return {
+        
+        resizeContent: function (shell) {
+            var contentContainer = shell.find('.shell-content-container');
+            contentContainer.css({
+                width: shell.width(),
+                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
+            });
+            shell.trigger("shell:content:resize");
+        },
+
+        // handle resize
+        resizeIframe: function (shell) {
+            var shellIframe = shell.find('#shell-iframe');
+            shellIframe.css({
+                width: shell.width(),
+                height: shell.height() - 28 - 40 //subtract shell-close-container and padding
+            });
+            shell.trigger("shell:iframe:resize");
+        },
+        
         /**
          * Shows a page in the shell.
          * 
@@ -73,9 +94,12 @@ nf.Shell = (function () {
                 shell.empty();
 
                 // register a new close handler
-                $('#shell-dialog').modal('setHandler', {
+                $('#shell-dialog').modal('setCloseHandler', {
                     close: function () {
                         deferred.resolve();
+                    },
+                    open: function () {
+                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                     }
                 });
 
@@ -98,23 +122,6 @@ nf.Shell = (function () {
                     width: shell.width(),
                     height: shell.height() - 28 //subtract shell-close-container
                 }).appendTo(shell);
-
-                // remove the window resize listener
-                if (typeof showPageResize === 'function') {
-                    $(window).off('resize', showPageResize);
-                }
-
-                // handle resize
-                showPageResize = function () {
-                    shellIframe.css({
-                        width: shell.width(),
-                        height: shell.height() - 28 //subtract shell-close-container
-                    });
-                    shell.trigger("shell:resize");
-                };
-
-                // add a window resize listener
-                $(window).resize(showPageResize);
             }).promise();
         },
         
@@ -143,7 +150,7 @@ nf.Shell = (function () {
                     content.detach();
 
                     // register a new close handler
-                    $('#shell-dialog').modal('setHandler', {
+                    $('#shell-dialog').modal('setCloseHandler', {
                         close: function () {
                             deferred.resolve();
 
@@ -159,30 +166,13 @@ nf.Shell = (function () {
                     $('#shell-dialog').modal('show');
 
                     // create the content container
-                    var contentContainer = $('<div>').css({
+                    var contentContainer = $('<div>').addClass('shell-content-container').css({
                         width: shell.width(),
                         height: shell.height()
                     }).append(content).appendTo(shell);
-
-                    // remove the window resize listener
-                    if (typeof showContentResize === 'function') {
-                        $(window).off('resize', showContentResize);
-                    }
                     
                     // show the content
                     content.show();
-
-                    // handle resizes
-                    showContentResize = function () {
-                        contentContainer.css({
-                            width: shell.width(),
-                            height: shell.height()
-                        });
-                        shell.trigger("shell:resize");
-                    };
-                    
-                    // add a window resize listener
-                    $(window).resize(showContentResize);
                 }
             }).promise();
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
index 797aaade06..8729958f48 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-status-history.js
@@ -850,7 +850,7 @@ nf.StatusHistory = (function () {
             },
             start: function (e, ui) {
                 var helperOffset = ui.helper.offset();
-                var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2) + 8; //8 for the box shadow
+                var dialogOuter = ((statusHistoryDialog.outerWidth() - statusHistoryDialog.width()) / 2);
                 var dialogContent = statusHistoryDialog.find('.dialog-content');
                 var dialogContentPaddingRight = ((dialogContent.outerWidth() - dialogContent.width()) / 2);
                 var chartOuter = chartContainer.outerWidth() - chartContainer.width();
@@ -859,9 +859,8 @@ nf.StatusHistory = (function () {
                 maxWidth = $('body').width() - helperOffset.left - dialogOuter - dialogContentPaddingRight - chartOuter;
 
                 // calculate the max height of the component
-                var dialogContentPaddingBottom = ((dialogContent.outerHeight() - dialogContent.height()) / 2);
-                var dialogButtonsHeight = statusHistoryDialog.find('.dialog-buttons').height() + 5; //5 for the box shadow
-                maxHeight = $('body').height() - helperOffset.top - dialogOuter - chartOuter - dialogContentPaddingBottom - dialogButtonsHeight - chartControlContainer.outerHeight(true);
+                var dialogContentPaddingBottom = dialogContent.outerHeight() - dialogContent.height() - parseInt(dialogContent.css('padding-top'), 10);
+                maxHeight = $('body').height() - helperOffset.top - dialogOuter - chartOuter - dialogContentPaddingBottom - chartControlContainer.outerHeight(true);
 
                 // record the current extent so it can be reset on stop
                 if (!brush.empty()) {
@@ -1077,6 +1076,7 @@ nf.StatusHistory = (function () {
 
             // configure the dialog and make it draggable
             $('#status-history-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: "Status History",
                 buttons: [{
                     buttonText: 'Close',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
index 5d1d76a7ac..a1317e4d5c 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/provenance/nf-provenance-lineage.js
@@ -39,6 +39,7 @@ nf.ProvenanceLineage = (function () {
 
         // initialize the dialog
         $('#lineage-query-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Computing FlowFile lineage...',
             handler: {
                 close: function () {
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 9f739a3408..b68d7d0aa4 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
@@ -185,6 +185,7 @@ nf.ProvenanceTable = (function () {
         $('#event-details-tabs').tabbs({
             tabStyle: 'tab',
             selectedTabStyle: 'selected-tab',
+            scrollableTabContentStyle: 'scrollable',
             tabs: [{
                 name: 'Details',
                 tabContentId: 'event-details-tab-content'
@@ -198,6 +199,7 @@ nf.ProvenanceTable = (function () {
         });
 
         $('#event-details-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Provenance Event',
             buttons: [{
                 buttonText: 'Ok',
@@ -221,6 +223,9 @@ nf.ProvenanceTable = (function () {
                     $('#child-flowfiles-container').empty();
                     $('#provenance-event-cluster-node-id').text('');
                     $('#modified-attribute-toggle').removeClass('checkbox-checked').addClass('checkbox-unchecked');
+                },
+                open: function () {
+                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 }
             }
         });
@@ -359,6 +364,7 @@ nf.ProvenanceTable = (function () {
 
         // configure the search dialog
         $('#provenance-search-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Search Events',
             buttons: [{
                 buttonText: 'Search',
@@ -460,6 +466,7 @@ nf.ProvenanceTable = (function () {
 
         // initialize the dialog
         $('#provenance-query-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Searching provenance events...',
             handler: {
                 close: function () {
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 fe16705744..f1ac3b9b63 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
@@ -222,8 +222,40 @@ nf.Provenance = (function () {
                         setBodySize();
                     });
 
-                    // listen for browser resize events to reset the body size
-                    $(window).resize(setBodySize);
+                    $(window).on('resize', function (e) {
+                        setBodySize();
+                        // resize dialogs when appropriate
+                        var dialogs = $('.dialog');
+                        for (var i = 0, len = dialogs.length; i < len; i++) {
+                            if ($(dialogs[i]).is(':visible')){
+                                setTimeout(function(dialog){
+                                    dialog.modal('resize');
+                                }, 50, $(dialogs[i]));
+                            }
+                        }
+
+                        // resize grids when appropriate
+                        var gridElements = $('*[class*="slickgrid_"]');
+                        for (var j = 0, len = gridElements.length; j < len; j++) {
+                            if ($(gridElements[j]).is(':visible')){
+                                setTimeout(function(gridElement){
+                                    gridElement.data('gridInstance').resizeCanvas();
+                                }, 50, $(gridElements[j]));
+                            }
+                        }
+
+                        // toggle tabs .scrollable when appropriate
+                        var tabsContainers = $('.tab-container');
+                        var tabsContents = [];
+                        for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                            if ($(tabsContainers[k]).is(':visible')){
+                                tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                            }
+                        }
+                        $.each(tabsContents, function (index, tabsContent) {
+                            nf.Common.toggleScrollable(tabsContent.get(0));
+                        });
+                    });
                 });
             });
         }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
index eedeed27c3..799c2cc19f 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js
@@ -32,6 +32,7 @@ nf.ClusterSearch = (function () {
         init: function () {
             // configure the view single node dialog
             $('#view-single-node-dialog').modal({
+                scrollableContentStyle: 'scrollable',
                 headerText: 'Select node',
                 buttons: [{
                     buttonText: 'Ok',
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
index 60427039f5..7a3d260430 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
@@ -73,6 +73,7 @@ nf.SummaryTable = (function () {
         $('#summary-tabs').tabbs({
             tabStyle: 'tab',
             selectedTabStyle: 'selected-tab',
+            scrollableTabContentStyle: 'scrollable',
             tabs: [{
                 name: 'Processors',
                 tabContentId: 'processor-summary-tab-content'
@@ -528,6 +529,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster processor summary dialog
         $('#cluster-processor-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Processor Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -784,6 +786,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster connection summary dialog
         $('#cluster-connection-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Connection Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -1088,6 +1091,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster process group summary dialog
         $('#cluster-process-group-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Process Group Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -1331,6 +1335,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster input port summary dialog
         $('#cluster-input-port-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Input Port Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -1570,6 +1575,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster output port summary dialog
         $('#cluster-output-port-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Output Port Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -1866,6 +1872,7 @@ nf.SummaryTable = (function () {
 
         // initialize the cluster remote process group summary dialog
         $('#cluster-remote-process-group-summary-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'Cluster Remote Process Group Summary',
             buttons: [{
                 buttonText: 'Close',
@@ -1969,6 +1976,7 @@ nf.SummaryTable = (function () {
         $('#system-diagnostics-tabs').tabbs({
             tabStyle: 'tab',
             selectedTabStyle: 'selected-tab',
+            scrollableTabContentStyle: 'scrollable',
             tabs: [{
                 name: 'JVM',
                 tabContentId: 'jvm-tab-content'
@@ -1980,6 +1988,7 @@ nf.SummaryTable = (function () {
 
         // initialize the system diagnostics dialog
         $('#system-diagnostics-dialog').modal({
+            scrollableContentStyle: 'scrollable',
             headerText: 'System Diagnostics',
             buttons: [{
                 buttonText: 'Close',
@@ -1998,6 +2007,9 @@ nf.SummaryTable = (function () {
                 close: function () {
                     // show the summary loading container
                     $('#summary-loading-container').show();
+                },
+                open: function () {
+                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 }
             }
         });
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 8476621346..f67a75355e 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
@@ -183,8 +183,40 @@ nf.Summary = (function () {
                             setBodySize();
                         }).fail(nf.Common.handleAjaxError);
 
-                        // listen for browser resize events to reset the body size
-                        $(window).resize(setBodySize);
+                        $(window).on('resize', function (e) {
+                            setBodySize();
+                            // resize dialogs when appropriate
+                            var dialogs = $('.dialog');
+                            for (var i = 0, len = dialogs.length; i < len; i++) {
+                                if ($(dialogs[i]).is(':visible')){
+                                    setTimeout(function(dialog){
+                                        dialog.modal('resize');
+                                    }, 50, $(dialogs[i]));
+                                }
+                            }
+
+                            // resize grids when appropriate
+                            var gridElements = $('*[class*="slickgrid_"]');
+                            for (var j = 0, len = gridElements.length; j < len; j++) {
+                                if ($(gridElements[j]).is(':visible')){
+                                    setTimeout(function(gridElement){
+                                        gridElement.data('gridInstance').resizeCanvas();
+                                    }, 50, $(gridElements[j]));
+                                }
+                            }
+
+                            // toggle tabs .scrollable when appropriate
+                            var tabsContainers = $('.tab-container');
+                            var tabsContents = [];
+                            for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                                if ($(tabsContainers[k]).is(':visible')){
+                                    tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                                }
+                            }
+                            $.each(tabsContents, function (index, tabsContent) {
+                                nf.Common.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
                     });
                 });
             });
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 678c25f914..da5785b005 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
@@ -157,8 +157,40 @@ nf.Templates = (function () {
                             setBodySize();
                         }).fail(nf.Common.handleAjaxError);
 
-                        // listen for browser resize events to reset the body size
-                        $(window).resize(setBodySize);
+                        $(window).on('resize', function (e) {
+                            setBodySize();
+                            // resize dialogs when appropriate
+                            var dialogs = $('.dialog');
+                            for (var i = 0, len = dialogs.length; i < len; i++) {
+                                if ($(dialogs[i]).is(':visible')){
+                                    setTimeout(function(dialog){
+                                        dialog.modal('resize');
+                                    }, 50, $(dialogs[i]));
+                                }
+                            }
+
+                            // resize grids when appropriate
+                            var gridElements = $('*[class*="slickgrid_"]');
+                            for (var j = 0, len = gridElements.length; j < len; j++) {
+                                if ($(gridElements[j]).is(':visible')){
+                                    setTimeout(function(gridElement){
+                                        gridElement.data('gridInstance').resizeCanvas();
+                                    }, 50, $(gridElements[j]));
+                                }
+                            }
+
+                            // toggle tabs .scrollable when appropriate
+                            var tabsContainers = $('.tab-container');
+                            var tabsContents = [];
+                            for (var k = 0, len = tabsContainers.length; k < len; k++) {
+                                if ($(tabsContainers[k]).is(':visible')){
+                                    tabsContents.push($('#' + $(tabsContainers[k]).attr('id') + '-content'));
+                                }
+                            }
+                            $.each(tabsContents, function (index, tabsContent) {
+                                nf.Common.toggleScrollable(tabsContent.get(0));
+                            });
+                        });
                     });
                 });
             });