Merge pull request origo-map#1664 from origo-map/legend-search-list

fix: search result not hidden in legend search
Flodkvist · Feb 10, 2023 · 96c34bf · 96c34bf
2 parents a7c3f5b + ab12463
commit 96c34bf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/scss/externs/_awesomplete.base.scss b/scss/externs/_awesomplete.base.scss
@@ -15,6 +15,14 @@
   width: 100%;
 }
 
+.awesomplete.black {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  position: fixed;
+  min-width: 100%;
+}
+
 .awesomplete > input {
   display: block;
 }
@@ -39,7 +47,9 @@
   left: 0px;
   list-style: none;
   margin: 0;
-  min-width: 100%;
+  min-width: 180px;
+  max-width: 220px;
+  overflow-wrap: break-word;
   padding: 0;
   position: absolute;
   top: auto;

diff --git a/src/controls/legend.js b/src/controls/legend.js
@@ -257,7 +257,7 @@ const Legend = function Legend(options = {}) {
 
   const layerSearchInput = Input({
     cls: 'o-search-layer-field placeholder-text-smaller smaller',
-    style: { height: '1.5rem', margin: 0, width: '100%' },
+    style: { height: '1.5rem', margin: 0, width: '180px' },
     placeholderText: searchLayersPlaceholderText,
     value: ''
   });
@@ -480,7 +480,14 @@ const Legend = function Legend(options = {}) {
         toolsEl.insertBefore(dom.html(divider.render()), toolsEl.firstChild);
         toolsEl.insertBefore(dom.html(button.render()), toolsEl.firstChild);
       } else {
-        toolsEl.appendChild(dom.html(button.render()));
+        const node = document.createElement('div');
+        if (typeof button.getValue === 'function') {
+          node.classList.add('grow');
+          toolsEl.appendChild(node);
+          node.appendChild(dom.html(button.render()));
+        } else {
+          toolsEl.appendChild(dom.html(button.render()));
+        }
       }
       toolsCmp.addComponent(button);
       button.onRender();