fix: set maxheight for layer search (#1886)

* Set maxheight for layer search * Update _awesomplete.theme.scss * Update _awesomplete.theme.scss * Update _awesomplete.base.scss * Fix for search as well * Update search.js * Final adjustments
origo-map · Nov 3, 2023 · 907a77d · 907a77d
1 parent b955174
commit 907a77d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/scss/externs/_awesomplete.base.scss b/scss/externs/_awesomplete.base.scss
@@ -30,6 +30,7 @@
   position: absolute;
   top: 40px;
   z-index: 1;
+  overflow-y: auto;
 }
 
 .awesomplete.black > ul {
@@ -39,14 +40,15 @@
   left: 0px;
   list-style: none;
   margin: 0;
-  min-width: 180px;
-  max-width: 100%;
+  width: 100%;
+  min-width: unset;
   overflow-wrap: break-word;
   padding: 0;
   position: absolute;
   top: auto;
   bottom: 100%;
   z-index: 9999999;
+  overflow-y: auto;
 }
 
 .awesomplete > ul:empty {

diff --git a/scss/externs/_awesomplete.theme.scss b/scss/externs/_awesomplete.theme.scss
@@ -84,10 +84,3 @@
 .awesomplete li[aria-selected='true'] mark {
   background-color: $search-hover-backround;
 }
-
-&[class*=#{$media-l-m}] {
-  .awesomplete > ul {
-    max-width: calc(100% + 2rem);
-    min-width: calc(100% + 2rem);
-  }
-}
diff --git a/src/controls/legend.js b/src/controls/legend.js
@@ -507,7 +507,7 @@ const Legend = function Legend(options = {}) {
           return suggestionValue.toLowerCase().includes(userInput.toLowerCase()) ? suggestionValue : false;
         }
       });
-
+      awesomplete.ul.style.maxHeight = `${calcMaxHeight(getTargetHeight()) / 2}px`;
       input.parentNode.classList.add('black');
       input.parentNode.classList.add('grow');
       input.addEventListener('keyup', (e) => {

diff --git a/src/controls/search.js b/src/controls/search.js
@@ -312,6 +312,8 @@ const Search = function Search(options = {}) {
 
   function initAutocomplete() {
     const input = document.getElementsByClassName('o-search-field')[0];
+    const mapEl = viewer.getMap().getTargetElement();
+    const listHeight = mapEl.offsetHeight / 2;
 
     awesomplete = new Awesomplete('.o-search-field', {
       minChars: minLength,
@@ -324,6 +326,7 @@ const Search = function Search(options = {}) {
         return suggestionValue.toLowerCase().includes(userInput.toLowerCase()) ? suggestionValue : false;
       }
     });
+    awesomplete.ul.style.maxHeight = `${listHeight}px`;
 
     const handler = function func(list) {
       awesomplete.list = list;