NIFI-3291:

- Fixing styles from our usage of jquery ui autocomplete.
- Fixing horizontal scroll bars.
- Fixing border around content repos.

This closes #1429

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/common-ui.css

@@ -594,7 +594,7 @@ md-progress-linear > div {
     font-weight: 500;
 }
 
-.setting-header{
+.setting-header {
     color: #728e9b;
     font-size: 12pt;
     font-family: 'Roboto Slab';
@@ -611,3 +611,25 @@ md-progress-linear > div {
     cursor: default;
     line-height: normal;
 }
+
+/* jquery ui autocomplete override */
+
+.ui-autocomplete {
+    overflow: auto !important;
+    border: 1px solid #aaaaaa !important;
+    font-size: 12px !important;
+    font-family: Roboto !important;
+}
+
+.ui-menu .ui-menu-item a {
+    display: block;
+    border: 1px solid transparent;
+    line-height: 1.5;
+    margin: 0 !important;
+    color: #333 !important;
+}
+
+.ui-menu .ui-menu-item a.ui-state-active {
+    background: #D4E0E5 !important;
+    border: 1px solid #999999;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/counters.css

@@ -73,3 +73,7 @@
     right: 0px;
     min-height: 150px;
 }
+
+#counters-table div.slick-viewport {
+    overflow-x: hidden !important;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css

@@ -142,20 +142,12 @@ input.search-flow {
 
 #search-flow-results .ui-autocomplete {
     max-height: 400px;
-    overflow: auto;
-    border: 1px solid #aaaaaa;
     z-index: 1251;
-    border-radius: 0;
-}
-
-#search-flow-results .ui-menu .ui-menu-item a.ui-state-active {
-    background: #D4E0E5 !important;
-    border: 1px solid #999999;
-    border-radius: 0;
 }
 
 #search-flow-results li.search-header {
     font-weight: bold;
+    color: #222 !important;
     padding-top: 4px;
     padding-left: 4px;
     padding-right: 4px;
@@ -170,8 +162,9 @@ input.search-flow {
 #search-flow-results div.search-match {
     margin-left: 26px;
     color: #888;
-    font-size: 10px;
+    font-size: 11px;
-    line-height: 1.4em;
+    line-height: 1.4;
+    word-break: break-all;
 }
 
 div.search-glass-pane {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/history.css

@@ -156,3 +156,7 @@ div.history-details-name {
     right: 0px;
     min-height: 150px;
 }
+
+#history-table div.slick-viewport {
+    overflow-x: hidden !important;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/policy-management.css

@@ -203,16 +203,7 @@ div.policy-selected-component-type {
 
 #search-users-results .ui-autocomplete {
     max-height: 300px;
-    overflow: auto;
-    border: 1px solid #aaaaaa;
     z-index: 1351;
-    border-radius: 0;
-}
-
-#search-users-results .ui-menu .ui-menu-item a.ui-state-active {
-    background: #D4E0E5 !important;
-    border: 1px solid #999999;
-    border-radius: 0;
 }
 
 div.secure-port-setting {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/provenance.css

@@ -338,6 +338,10 @@ div.content-detail-value {
     min-height: 150px;
 }
 
+#provenance-table div.slick-viewport {
+    overflow-x: hidden !important;
+}
+
 /* provenance lineage */
 
 #provenance-lineage {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css

@@ -96,16 +96,7 @@ div.search-match {
 
 #search-cluster-results .ui-autocomplete {
     max-height: 300px;
-    overflow: auto;
-    border: 1px solid #aaaaaa;
     z-index: 1351;
-    border-radius: 0;
-}
-
-#search-cluster-results .ui-menu .ui-menu-item a.ui-state-active {
-    background: #D4E0E5 !important;
-    border: 1px solid #999999;
-    border-radius: 0;
 }
 
 input.search-nodes {
@@ -192,6 +183,8 @@ input.search-nodes {
 #content-repository-storage-usage-container {
     height: 179px;
     overflow-y: scroll;
+    border: 1px solid #ccc;
+    padding: 4px;
 }
 
 #content-repository-storage-usage-container div.storage-usage {
@@ -298,6 +291,10 @@ div.summary-table {
     min-height: 150px;
 }
 
+div.summary-table div.slick-viewport {
+    overflow-x: hidden !important;
+}
+
 span.sorted {
     text-decoration: underline;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/templates.css

@@ -91,3 +91,7 @@
     right: 0px;
     min-height: 150px;
 }
+
+#templates-table div.slick-viewport {
+    overflow-x: hidden !important;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js

@@ -84,7 +84,7 @@ nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider) {
                     },
                     _resizeMenu: function () {
                         var ul = this.menu.element;
-                        ul.width(399);
+                        ul.width(400);
                     },
                     _normalize: function (searchResults) {
                         var items = [];

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js

@@ -154,7 +154,7 @@ nf.PolicyManagement = (function () {
             },
             _resizeMenu: function () {
                 var ul = this.menu.element;
-                ul.width($('#search-users-field').outerWidth() - 6);
+                ul.width($('#search-users-field').outerWidth() - 2);
             },
             _renderUser: function (ul, match) {
                 var userContent = $('<a></a>').text(match.component.identity);

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-cluster-search.js

@@ -148,7 +148,7 @@ nf.ClusterSearch = (function () {
 
                     var self = this;
                     $.each(searchResults.nodeResults, function (_, node) {
-                        self._renderItemData(ul, {
+                        self._renderItem(ul, {
                             label: node.address,
                             value: node.address
                         });
@@ -161,7 +161,11 @@ nf.ClusterSearch = (function () {
                 },
                 _resizeMenu: function () {
                     var ul = this.menu.element;
-                    ul.width($('#cluster-search-field').width() + 6);
+                    ul.width($('#cluster-search-field').outerWidth() - 2);
+                },
+                _renderItem: function (ul, match) {
+                    var itemContent = $('<a></a>').text(match.label);
+                    return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
                 }
             });