From 49bdb030875e9d30e8670a5d85e76746805c70b6 Mon Sep 17 00:00:00 2001
From: Erwan Rouchet <rouchet@teklia.com>
Date: Tue, 12 Apr 2022 14:40:02 +0200
Subject: [PATCH] Fix positioning of suggestion dropdowns
---
vue/Element/CreationForm.vue | 1 +
vue/Element/DetailsPanel.vue | 2 +-
vue/Navigation/FilterBar/Bar.vue | 1 -
vue/Navigation/FilterBar/Input.vue | 9 ++++++---
vue/SearchableSelect.vue | 32 +++++++++++++++++++++++++++---
5 files changed, 37 insertions(+), 8 deletions(-)
diff --git a/vue/Element/CreationForm.vue b/vue/Element/CreationForm.vue
index a1daedbf8..1eb4888ee 100644
--- a/vue/Element/CreationForm.vue
+++ b/vue/Element/CreationForm.vue
@@ -79,6 +79,7 @@
:corpus-id="corpusId"
allow-empty
auto-select
+ is-fixed
v-on:submit="createElement"
/>
</div>
diff --git a/vue/Element/DetailsPanel.vue b/vue/Element/DetailsPanel.vue
index cec45b400..09270b261 100644
--- a/vue/Element/DetailsPanel.vue
+++ b/vue/Element/DetailsPanel.vue
@@ -12,7 +12,7 @@
<Classifications v-if="element.classifications" :element="element" />
<form v-on:submit.prevent="createClassification">
<div v-if="canWriteElement(elementId) && hasMlClasses" class="field has-addons">
- <p class="control has-margin-left">
+ <p class="control is-expanded">
<MLClassSelect
ref="newClassificationSelect"
v-model="selectedNewClassification"
diff --git a/vue/Navigation/FilterBar/Bar.vue b/vue/Navigation/FilterBar/Bar.vue
index 227b0893a..8a444aa83 100644
--- a/vue/Navigation/FilterBar/Bar.vue
+++ b/vue/Navigation/FilterBar/Bar.vue
@@ -400,7 +400,6 @@ export default {
.input {
height: auto !important;
- overflow-x: auto;
flex-wrap: wrap;
padding-top: 0;
padding-bottom: 0;
diff --git a/vue/Navigation/FilterBar/Input.vue b/vue/Navigation/FilterBar/Input.vue
index 4ca38c3d8..1b625008b 100644
--- a/vue/Navigation/FilterBar/Input.vue
+++ b/vue/Navigation/FilterBar/Input.vue
@@ -1,5 +1,5 @@
<template>
- <fieldset>
+ <fieldset class="is-relative">
<input
type="text"
ref="input"
@@ -199,8 +199,11 @@ fieldset, .input {
}
.dropdown-content {
max-width: 60ch;
- position: fixed;
- z-index: 1;
+ position: absolute;
+ // Height of an input with Bulma
+ top: 2.25em;
+ left: 0;
+ z-index: 4;
max-height: 20rem;
overflow-y: auto;
}
diff --git a/vue/SearchableSelect.vue b/vue/SearchableSelect.vue
index b30ee970d..7f1d21e6c 100644
--- a/vue/SearchableSelect.vue
+++ b/vue/SearchableSelect.vue
@@ -14,6 +14,7 @@
<div
v-if="toggled && (suggestionsCount || loading)"
class="dropdown-content is-paddingless"
+ :class="isFixed ? 'is-fixed' : 'is-absolute'"
>
<span class="dropdown-item" v-if="loading">
<em>Loading…</em>
@@ -108,6 +109,20 @@ export default {
// Validate a value when it is typed
type: Boolean,
default: false
+ },
+ /**
+ * The suggestions dropdown will not display correctly inside of any parent that has
+ * an `overflow` CSS property set to anything other than `visible`.
+ *
+ * Bulma's .modal, .modal-card and .modal-card-body use those classes, to let the user
+ * scroll in the modal and not the whole page, but for modals where it is certain that
+ * there will not be any scrolling, you can enable this attribute to make the suggestions
+ * dropdown use `position: fixed`, which will make sure the dropdown gets displayed above
+ * everything else.
+ */
+ isFixed: {
+ type: Boolean,
+ default: false
}
},
data: () => ({
@@ -297,12 +312,23 @@ fieldset.toggled {
border-top-left-radius: 0;
}
}
+
.dropdown-content {
max-width: 60ch;
- position: fixed;
- width: 100%;
- z-index: 1;
+ z-index: 4;
+
+ &.is-fixed {
+ position: fixed;
+ }
+
+ &.is-absolute {
+ position: absolute;
+ // Height of an input with Bulma
+ top: 2.25em;
+ left: 0;
+ }
}
+
.dropdown-item {
white-space: normal;
&:not(:last-child) {
--
GitLab