diff --git a/css/activities.css b/css/activities.css index da60cd4745..df4058cb76 100644 --- a/css/activities.css +++ b/css/activities.css @@ -61,6 +61,7 @@ transition: width 0.4s ease-in-out; font-size: 24px; color: black; + max-width: 100%; } #search:focus { @@ -75,6 +76,8 @@ position: relative; background-color: rgba(255, 255, 255, 1); max-width: 396px; + max-height: 200px; + overflow-y: auto; font-size: 18px; border: 2px solid #87cefa; list-style-type: none; diff --git a/js/activity.js b/js/activity.js index 4ee9b1d93b..682d24f670 100644 --- a/js/activity.js +++ b/js/activity.js @@ -2385,27 +2385,27 @@ class Activity { that.doSearch(); if (event.keyCode === 13) this.searchWidget.style.visibility = "visible"; }, - focus: (event, ui) => { + focus: (event) => { event.preventDefault(); - that.searchWidget.value = ui.item.label; } }); - $j("#search").autocomplete("widget").addClass("scrollSearch"); - $j("#search").autocomplete("instance")._renderItem = (ul, item) => { return $j("
") .data("item.autocomplete", item) .append( '' + - "" + - " " + + '" height="20px">' + + " " + item.label + "" ) - .appendTo(ul.css("z-index", 9999)); + .appendTo(ul.css({ + "z-index": 9999, + "max-height": "200px", + "overflow-y": "auto" + })); }; const searchInput = this.searchWidget.idInput_custom; if (!searchInput || searchInput.length <= 0) return;