Fix z-index issue with additional filters

radiantearth · Apr 17, 2024 · af21458 · af21458
1 parent 9047872
commit af21458
Showing 1 changed file with 22 additions and 24 deletions.
diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
@@ -62,30 +62,28 @@
           </multiselect>
         </b-form-group>
 
-        <div v-if="showAdditionalFilters" class="additional-filters">
-          <b-form-group :label="$t('search.additionalFilters')">
-            <b-form-radio-group v-model="filtersAndOr" :options="andOrOptions" name="logical" size="sm" />
-
-            <b-dropdown size="sm" :text="$t('search.addFilter')" block variant="primary" class="queryables mt-2 mb-3" menu-class="w-100">
-              <template v-for="queryable in sortedQueryables">
-                <b-dropdown-item v-if="queryable.supported" :key="queryable.id" @click="additionalFieldSelected(queryable)">
-                  {{ queryable.title }}
-                  <b-badge variant="dark" class="ml-2">{{ queryable.id }}</b-badge>
-                </b-dropdown-item>
-              </template>
-            </b-dropdown>
-
-            <QueryableInput
-              v-for="(filter, index) in filters" :key="filter.id"
-              :value.sync="filter.value"
-              :operator.sync="filter.operator"
-              :queryable="filter.queryable"
-              :index="index"
-              :cql="cql"
-              @remove-queryable="removeQueryable(index)"
-            />
-          </b-form-group>
-        </div>
+        <b-form-group v-if="showAdditionalFilters" class="additional-filters" :label="$t('search.additionalFilters')">
+          <b-form-radio-group v-model="filtersAndOr" :options="andOrOptions" name="logical" size="sm" />
+
+          <b-dropdown size="sm" :text="$t('search.addFilter')" block variant="primary" class="queryables mt-2 mb-3" menu-class="w-100">
+            <template v-for="queryable in sortedQueryables">
+              <b-dropdown-item v-if="queryable.supported" :key="queryable.id" @click="additionalFieldSelected(queryable)">
+                {{ queryable.title }}
+                <b-badge variant="dark" class="ml-2">{{ queryable.id }}</b-badge>
+              </b-dropdown-item>
+            </template>
+          </b-dropdown>
+
+          <QueryableInput
+            v-for="(filter, index) in filters" :key="filter.id"
+            :value.sync="filter.value"
+            :operator.sync="filter.operator"
+            :queryable="filter.queryable"
+            :index="index"
+            :cql="cql"
+            @remove-queryable="removeQueryable(index)"
+          />
+        </b-form-group>
 
         <hr v-if="canFilterExtents || conformances.CollectionIdFilter || conformances.ItemIdFilter || showAdditionalFilters">