fixed the vue-select/bootstrap-vue css conflict sagalbot/vue-select#662

brainlife · Sep 26, 2018 · 2e7fba6 · 2e7fba6
1 parent a8942e8
commit 2e7fba6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/ui/src/components/datatypeselecter.vue b/ui/src/components/datatypeselecter.vue
@@ -4,6 +4,13 @@
         <datatype :datatype="datatype"/>
     </template>
 </v-select>
+<!--
+<el-select v-model="selected" placeholder="Select" v-if="datatypes">
+    <el-option v-for="datatype in datatypes" :key="datatype._id" :label="datatype.name" :value="datatype._id">
+        <datatype :datatype="datatype"/>
+    </el-option>
+</el-select>
+-->
 </template>
 
 <script>

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -52,8 +52,8 @@ Vue.use(Meta);
 
 /////////////////////////////////////// css /////////////////////////////////////
 
-//import 'bootstrap/dist/css/bootstrap.min.css'
-//import 'bootstrap-vue/dist/bootstrap-vue.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.min.css'
 
 //is this for vue-element?
 import '../theme/index.css' 

diff --git a/ui/src/warehouse.vue b/ui/src/warehouse.vue
@@ -348,6 +348,12 @@ background-color: white;
 .v-select {
 font-family: inherit;
 }
+.v-select.dropdown .dropdown-toggle {
+content: inherit; /*prevent bootstrap-vue css conflict*/
+}
+.v-select.dropdown .form-control {
+height: inherit; /*prevent bootstrap-vue css conflict*/
+}
 
 .select2-container--default .select2-selection--single {
 height: 36px;