[23.2] Fix Multiselect in BModal overflows out of view bug

Use `overflow: initial` to fix make sure the multiselect goes beyond the modal.
ahmedhamidawan · Dec 15, 2023 · fa6e64b · fa6e64b
1 parent ad7fccb
commit fa6e64b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -91,6 +91,7 @@
             id="change-dbkey-of-selected-content"
             title="Change Database/Build?"
             title-tag="h2"
+            body-class="modal-with-selector"
             @ok="changeDbkeyOfSelected">
             <p v-localize>Select a new Database/Build for {{ numSelected }} items:</p>
             <DbKeyProvider v-slot="{ item: dbkeys, loading: loadingDbKeys }">
@@ -99,14 +100,14 @@
                     :loading="loadingDbKeys"
                     :items="dbkeys"
                     :current-item-id="selectedDbKey"
-                    class="mb-5 pb-5"
                     @update:selected-item="onSelectedDbKey" />
             </DbKeyProvider>
         </b-modal>
         <b-modal
             id="change-datatype-of-selected-content"
             title="Change data type?"
             title-tag="h2"
+            body-class="modal-with-selector"
             :ok-disabled="selectedDatatype == null"
             @ok="changeDatatypeOfSelected">
             <p v-localize>Select a new data type for {{ numSelected }} items:</p>
@@ -116,7 +117,6 @@
                     :loading="loadingDatatypes"
                     :items="datatypes"
                     :current-item-id="selectedDatatype"
-                    class="mb-5 pb-5"
                     @update:selected-item="onSelectedDatatype" />
             </DatatypesProvider>
         </b-modal>
@@ -347,3 +347,9 @@ export default {
     },
 };
 </script>
+
+<style>
+.modal-with-selector {
+    overflow: initial;
+}
+</style>
diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
@@ -101,6 +101,6 @@ defineExpose({
 
 .upload-dialog-body {
     height: 500px;
-    overflow: hidden;
+    overflow: initial;
 }
 </style>