You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/07/06 12:03:36 UTC

[2/2] nifi git commit: [NIFI-2081] Responsive dialog content, tab content, and scrollable styles. This closes #594

[NIFI-2081] Responsive dialog content, tab content, and scrollable styles. This closes #594


Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/293dc299
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/293dc299
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/293dc299

Branch: refs/heads/master
Commit: 293dc299363713097752ee8ae3ab8ff3509ee0a2
Parents: 470513f
Author: Scott Aslan <ja...@hortonworks.com>
Authored: Tue Jul 5 09:29:33 2016 -0400
Committer: Matt Gilman <ma...@gmail.com>
Committed: Wed Jul 6 08:02:49 2016 -0400

----------------------------------------------------------------------
 .../canvas/process-group-configuration.jsp      |  52 +--
 .../partials/canvas/settings-content.jsp        |   4 +-
 .../provenance/provenance-search-dialog.jsp     |   2 +-
 .../partials/summary/summary-content.jsp        |  24 +-
 .../summary/system-diagnostics-dialog.jsp       | 208 +++++-----
 .../src/main/webapp/css/bulletin-board.css      |  10 +-
 .../nifi-web-ui/src/main/webapp/css/cluster.css |   1 +
 .../src/main/webapp/css/component-state.css     |  11 +-
 .../src/main/webapp/css/connection-details.css  |   2 -
 .../src/main/webapp/css/controller-service.css  |   6 -
 .../src/main/webapp/css/counters.css            |   1 +
 .../nifi-web-ui/src/main/webapp/css/dialog.css  |   4 +-
 .../nifi-web-ui/src/main/webapp/css/history.css |   1 +
 .../nifi-web-ui/src/main/webapp/css/main.css    |  16 +-
 .../webapp/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 +-
 .../css/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 -
 .../nifi-web-ui/src/main/webapp/css/summary.css |  70 +++-
 .../src/main/webapp/css/templates.css           |   1 +
 .../webapp/js/jquery/modal/jquery.modal.css     |  13 +-
 .../main/webapp/js/jquery/modal/jquery.modal.js | 399 +++++++++++--------
 .../propertytable/jquery.propertytable.css      |   8 +-
 .../propertytable/jquery.propertytable.js       |   2 +
 .../webapp/js/jquery/tabbs/jquery.tabbs.css     |  21 +-
 .../main/webapp/js/jquery/tabbs/jquery.tabbs.js |  17 +-
 .../nf-ng-canvas-global-menu-controller.js      |  10 +-
 .../nf-ng-canvas-operate-controller.js          |   2 +
 .../header/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 +
 .../src/main/webapp/js/nf/canvas/nf-actions.js  |   1 +
 .../src/main/webapp/js/nf/canvas/nf-canvas.js   | 119 ++++--
 .../webapp/js/nf/canvas/nf-component-state.js   |   1 +
 .../js/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 +
 .../main/webapp/js/nf/canvas/nf-port-details.js |   1 +
 .../nf/canvas/nf-process-group-configuration.js |   7 +-
 .../js/nf/canvas/nf-process-group-details.js    |   1 +
 .../js/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 +
 .../nf/canvas/nf-remote-process-group-ports.js  |   2 +
 .../webapp/js/nf/canvas/nf-reporting-task.js    |   5 +
 .../src/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 +
 .../src/main/webapp/js/nf/history/nf-history.js |  36 +-
 .../src/main/webapp/js/nf/nf-common.js          |  17 +
 .../main/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 ++-
 .../src/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 +
 .../src/main/webapp/js/nf/summary/nf-summary.js |  36 +-
 .../main/webapp/js/nf/templates/nf-templates.js |  36 +-
 73 files changed, 933 insertions(+), 493 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
----------------------------------------------------------------------
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 e94434f..be69652 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>
-                    <div class="read-only setting-field">
-                        <span id="read-only-process-group-comments"></span>
+                    <div class="editable settings-buttons">
+                        <div id="process-group-configuration-save" class="button">Apply</div>
+                        <div class="clear"></div>
                     </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">

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
----------------------------------------------------------------------
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 d421f85..00e17ea 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>

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/provenance/provenance-search-dialog.jsp
----------------------------------------------------------------------
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 565d016..0430518 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>

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/summary-content.jsp
----------------------------------------------------------------------
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 3ffe381..f8195b5 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 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="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 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>
-    <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="processor-summary-tab-content" class="configuration-tab">
             <div id="processor-summary-table" class="summary-table"></div>
         </div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/system-diagnostics-dialog.jsp
----------------------------------------------------------------------
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 9614505..9ab19e3 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 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 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 class="clear"></div>
                 </div>
-            </div>
-            <div class="spacer"></div>
-            <div class="settings-right">
+                <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">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>
+                    <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="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">

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
----------------------------------------------------------------------
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 6a0db2f..a43de40 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/cluster.css
----------------------------------------------------------------------
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 94a34df..612a147 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/component-state.css
----------------------------------------------------------------------
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 19172ee..ee4407d 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;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/connection-details.css
----------------------------------------------------------------------
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 b0807a0..61d9109 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;

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/controller-service.css
----------------------------------------------------------------------
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 0f9fbb7..9ac5555 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;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css
----------------------------------------------------------------------
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 ab2442d..65e6597 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;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
----------------------------------------------------------------------
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 fdcefd0..51e1dff 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;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css
----------------------------------------------------------------------
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 792a58f..cf1014e 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;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css
----------------------------------------------------------------------
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 a809760..55904fa 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;

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
----------------------------------------------------------------------
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 31d82c3..03c49cd 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;

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-details.css
----------------------------------------------------------------------
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 2450845..36fabda 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css
----------------------------------------------------------------------
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 c7e6cd1..b80c06d 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 */

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/queue-listing.css
----------------------------------------------------------------------
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 7f49d25..bcc0425 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;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/remote-process-group-configuration.css
----------------------------------------------------------------------
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 6cae4bd..44a6027 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;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/settings.css
----------------------------------------------------------------------
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 4738879..dff0875 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/shell.css
----------------------------------------------------------------------
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 332107e..63def4d 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

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/status-history.css
----------------------------------------------------------------------
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 511fa78..8643a9a 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
----------------------------------------------------------------------
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 6398715..483a024 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css
----------------------------------------------------------------------
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 762fdf5..a7a980b 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;
 }

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.css
----------------------------------------------------------------------
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 106b6bb..d4ad1a6 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js
----------------------------------------------------------------------
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 fef90b3..9a1c051 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,219 +262,227 @@
             });
         },
 
-        /**
-         * Shows the dialog.
-         */
-        show: function () {
+        resize: function () {
             var dialog = $(this);
             var dialogContent = dialog.find('.dialog-content');
 
-            var zIndex = dialog.css('z-index');
-            if (zIndex === 'auto') {
-                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
-                    zIndex = (isDefinedAndNotNull(dialog.data('nf-dialog')['z-index'])) ?
-                        dialog.data('nf-dialog')['z-index'] : 1301;
-                } else {
-                    zIndex = 1301;
-                }
-            }
-            var openDialogs = $.makeArray($('.dialog:visible'));
-            if (openDialogs.length >= 1){
-                var zVals = openDialogs.map(function(openDialog){
-                    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
-                zIndex = Math.max.apply(null, zVals) + 2;
-            }
-            dialog.css('z-index', zIndex);
-
             var nfDialog = {};
             if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
                 nfDialog = dialog.data('nf-dialog');
             }
 
-            // determine if dialog needs a glasspane
-            var hasGlasspane;
-            if (isDefinedAndNotNull(nfDialog.glasspane)) {
-                hasGlasspane = nfDialog.glasspane;
+            //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 {
-                hasGlasspane = true;
-            }
+                if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
+                    nfDialog.responsive.x = true;
+                } else {
+                    nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
+                }
 
-            //create glasspane overlay
-            if(hasGlasspane && (top === window)) {
-                // build the dialog modal
-                var modalGlassMarkup = '<div data-nf-dialog-parent="' + dialog.attr('id') + '" class="modal-glass"></div>';
+                if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
+                    nfDialog.responsive.y = true;
+                } else {
+                    nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
+                }
+            }
 
-                var modalGlass = $(modalGlassMarkup);
+            if (!isDefinedAndNotNull(nfDialog.resizable)) {
+                nfDialog.resizable = false;
+            } else {
+                nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
+            }
 
-                modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
+            if(nfDialog.resizable){
+                dialogContent.css({
+                    'position': 'static',
+                    'padding': '10px 20px 52px 20px'
+                });
             }
 
-            var resize = function () {
-                //initialize responsive properties
-                if (!isDefinedAndNotNull(nfDialog.responsive)) {
-                    nfDialog.responsive = {};
+            if (nfDialog.responsive.y || nfDialog.responsive.x) {
 
-                    if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
-                        nfDialog.responsive.x = true;
-                    }
+                var fullscreenHeight;
+                var fullscreenWidth;
 
-                    if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
-                        nfDialog.responsive.y = true;
-                    }
+                if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
+                    fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
                 } else {
-                    if (!isDefinedAndNotNull(nfDialog.responsive.x)) {
-                        nfDialog.responsive.x = true;
-                    } else {
-                        nfDialog.responsive.x = (nfDialog.responsive.x == "true" || nfDialog.responsive.x == true) ? true : false;
-                    }
+                    nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
 
-                    if (!isDefinedAndNotNull(nfDialog.responsive.y)) {
-                        nfDialog.responsive.y = true;
-                    } else {
-                        nfDialog.responsive.y = (nfDialog.responsive.y == "true" || nfDialog.responsive.y == true) ? true : false;
-                    }
+                    fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
                 }
 
-                if (!isDefinedAndNotNull(nfDialog.resizable)) {
-                    nfDialog.resizable = false;
+                if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-width'])) {
+                    fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
                 } else {
-                    nfDialog.resizable = (nfDialog.resizable == "true" || nfDialog.resizable == true) ? true : false;
-                }
+                    nfDialog.responsive['fullscreen-width'] = dialog.width() + 'px';
 
-                if (nfDialog.responsive.y || nfDialog.responsive.x) {
+                    fullscreenWidth = parseInt(nfDialog.responsive['fullscreen-width'], 10);
+                }
 
-                    var fullscreenHeight;
-                    var fullscreenWidth;
+                if (!isDefinedAndNotNull(nfDialog.width)) {
+                    nfDialog.width = dialog.css('width');
+                }
 
-                    if (isDefinedAndNotNull(nfDialog.responsive['fullscreen-height'])) {
-                        fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
+                if (!isDefinedAndNotNull(nfDialog['min-width'])) {
+                    if (parseInt(dialog.css('min-width'), 10) > 0) {
+                        nfDialog['min-width'] = dialog.css('min-width');
                     } else {
-                        nfDialog.responsive['fullscreen-height'] = dialog.height() + 'px';
-
-                        fullscreenHeight = parseInt(nfDialog.responsive['fullscreen-height'], 10);
+                        nfDialog['min-width'] = nfDialog.width;
                     }
+                }
 
-                    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);
-                    }
+                //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.width)) {
-                        nfDialog.width = dialog.css('width');
-                    }
+                if (!isDefinedAndNotNull(nfDialog.height)) {
+                    nfDialog.height = dialog.css('height');
+                }
 
-                    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;
-                        }
+                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-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';
-                    }
+                //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';
+                }
 
-                    if (!isDefinedAndNotNull(nfDialog.height)) {
-                        nfDialog.height = dialog.css('height');
+                //resize dialog
+                if ($(window).height() < fullscreenHeight) {
+                    if (nfDialog.responsive.y) {
+                        dialog.css('height', '100%');
+                        dialog.css('min-height', '100%');
                     }
-
-                    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;
+                } 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);
                     }
+                }
 
-                    //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';
+                if ($(window).width() < fullscreenWidth) {
+                    if (nfDialog.responsive.x) {
+                        dialog.css('width', '100%');
+                        dialog.css('min-width', '100%');
                     }
-
-                    //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);
+                } 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);
                     }
+                }
 
-                    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();
 
-                    dialog.center();
+                //persist data attribute
+                dialog.data('nfDialog', nfDialog);
+            }
 
-                    //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);
+                }
+            }
+        },
 
-                //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');
-                    }
+        /**
+         * Shows the dialog.
+         */
+        show: function () {
+            var dialog = $(this);
+
+            var zIndex = dialog.css('z-index');
+            if (zIndex === 'auto') {
+                if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                    zIndex = (isDefinedAndNotNull(dialog.data('nf-dialog')['z-index'])) ?
+                        dialog.data('nf-dialog')['z-index'] : 1301;
+                } else {
+                    zIndex = 1301;
                 }
-            };
+            }
+            var openDialogs = $.makeArray($('.dialog:visible'));
+            if (openDialogs.length >= 1){
+                var zVals = openDialogs.map(function(openDialog){
+                    var index;
+                    return isNaN(index = parseInt($(openDialog).css("z-index"), 10)) ? 0 : index;
+                });
+                //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);
 
-            // listen for browser resize events to resize and center the dialog
-            $(window).resize(function () {
-                resize();
+            var nfDialog = {};
+            if (isDefinedAndNotNull(dialog.data('nf-dialog'))) {
+                nfDialog = dialog.data('nf-dialog');
+            }
 
-                dialog.trigger("dialog:resize");
-            });
+            // determine if dialog needs a glass pane overlay
+            var hasGlasspane;
+            if (isDefinedAndNotNull(nfDialog.glasspane)) {
+                hasGlasspane = nfDialog.glasspane;
+            } else {
+                nfDialog.glasspane = hasGlasspane = true;
+            }
+
+            //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>';
+
+                var modalGlass = $(modalGlassMarkup);
+
+                modalGlass.css('z-index', zIndex - 1).appendTo($('body'));
+            }
+
+            //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);
                     }
                 }
             });

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.css
----------------------------------------------------------------------
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 8cbd057..499cb80 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 {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
----------------------------------------------------------------------
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 aba2841..122e998 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: {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.css
----------------------------------------------------------------------
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 e005adc..9e5ac33 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

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tabbs/jquery.tabbs.js
----------------------------------------------------------------------
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 e3bbb51..fdd59d4 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);

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/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
----------------------------------------------------------------------
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 0d00e27..2309020 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',

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/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
----------------------------------------------------------------------
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 cb329ba..0f03386 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',

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/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
----------------------------------------------------------------------
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 fb08a9d..bc3dae3 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 () {

http://git-wip-us.apache.org/repos/asf/nifi/blob/293dc299/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
----------------------------------------------------------------------
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 287a10e..1adc5cb 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 () {