diff --git a/vue/Element/CreationForm.vue b/vue/Element/CreationForm.vue
index a1daedbf8c5e42d2d5aa540a6ddb40f0e1f11d13..1eb4888ee97d5f0a19340e3190712784038cd511 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 cec45b4001444ea33f4eac3192fe250f054a37ad..09270b2617e6a124ddeaf3659ebe167480707455 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 227b0893a2b398fd558e07abb8b109d903c39904..8a444aa831d2619514d657da2259d7329b3640cd 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 4ca38c3d881a966ebf0d79b1f7872e4b6d005254..1b625008be948f85b2019ad08e378c2a362843c9 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 b30ee970d7aeb13d1fcdb8c0211cd3f76e03b062..7f1d21e6c9a9fd9335e1849091aff563f95dba40 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) {