Fix non-scrollable typeahead look

biigle · Oct 9, 2024 · 587d734 · 587d734
1 parent 60b721d
commit 587d734
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/resources/assets/js/core/components/typeahead.vue b/resources/assets/js/core/components/typeahead.vue
@@ -23,7 +23,7 @@
         v-show="showTypeahead"
         >
         <template slot="item" slot-scope="props">
-            <div ref="typeahead" :class="{'typeahead-scrollable': scrollable}">
+            <div ref="typeahead" :class="{'typeahead-scrollable':scrollable, 'typeahead': !scrollable}">
             <component
                 ref="dropdown"
                 :is="itemComponent"
@@ -36,7 +36,8 @@
                 :scrollable="scrollable"
                 :is-label="isLabelTree"
                 :active="props.activeIndex === index"
-                :class="{activeItem: props.activeIndex === index, 'typeahead-item-box': scrollable}"
+                class="typeahead-item-box"
+                :class="{activeItem: props.activeIndex === index}"
                 >
             </component>
             </div>

diff --git a/resources/assets/js/core/components/typeaheadItem.vue b/resources/assets/js/core/components/typeaheadItem.vue
@@ -51,7 +51,7 @@ export default {
         },
         computedClass() {
             return {
-                'scrollable-item': this.scrollable && !this.isLabel,
+                'scrollable-item': !this.scrollable || this.scrollable && !this.isLabel,
                 'scrollable-item-label': this.scrollable && this.isLabel,
                 'activeItemText': this.active
             };

diff --git a/resources/assets/sass/components/_typeahead.scss b/resources/assets/sass/components/_typeahead.scss
@@ -14,19 +14,24 @@
     white-space: nowrap;
 }
 
+.typeahead,
 .typeahead-scrollable {
     max-height: 200px;
+}
+.typeahead-scrollable {
     overflow-y: auto;
 }
 
 .typeahead-item-box {
     padding-left: 20px;
+    padding-right: 20px;
     padding-top: 3px;
     padding-bottom: 3px;
 }
 
 .typeahead-item-box:hover {
     background-color: #353535;
+    width: 100%;
 }
 
 .scrollable-item,