fix issue with bootstrap style

Keiwen · Nov 21, 2017 · 152b19d · 152b19d
1 parent f128d88
commit 152b19d
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ Enhanced checkboxes /radio input, component for vue 2+.
 
 > Issue with ES2015 -> switch away in version 1.4
 
+> Issue with bootstrap 3.3 on toggle component -> style fix in version 1.5
+
 ## Global use
 - npm install
 ```
@@ -129,7 +131,7 @@ As classic radio buttons, model bound to value from checked input
 ### Toggle button
 Checkbox is replaced by 2 switching labels, for on and off states
 ```
-<enhanced-toggle label="Checkbox"></enhanced-check>
+<enhanced-toggle></enhanced-check>
 ```
 ```
 <enhanced-toggle :labelOn="tc_labelOn" :labelOff="tc_labelOff"

diff --git a/dist/vue-enhanced-check.js b/dist/vue-enhanced-check.js
diff --git a/docs/dist/build.js b/docs/dist/build.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-enhanced-check",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "enhanced-check component for vue 2",
   "author": "Keiwen <[email protected]>",
   "private": false,
@@ -16,7 +16,6 @@
     "url": "https://github.com/Keiwen/vue-enhancedCheck.git"
   },
   "dependencies": {
-    "bootstrap": "^3.3.7",
     "vue": "^2.1.10"
   },
   "keywords": [

diff --git a/src/components/EnhancedToggle.vue b/src/components/EnhancedToggle.vue
@@ -92,8 +92,7 @@
         this.initLabelMaxWidth = this.getLabelMaxWidth();
         this.initLabelMaxChar = this.getLabelMaxChar();
         this.labelMaxWidth = this.initLabelMaxWidth;
-        this.labelMaxChar = this.initLabelMaxChar;
-        this.computeStyle()
+        this.labelMaxChar = this.initLabelMaxChar;        this.computeStyle()
       },
       computed: {
         computedClass () {
@@ -133,6 +132,8 @@
             '--switchPos': (this.labelMaxWidth + HORIZONTAL_PADDING) + 'px',
             '--toggleWidth': (this.labelMaxWidth + SWITCH_WIDTH/2 + HORIZONTAL_PADDING) + 'px'
           }
+
+          console.log('pouet', this.style)
         }
       }
     }
@@ -155,5 +156,18 @@
         }
     }
 
+    // !!! Style completely broken with bootstrap !!!
+    // following style is canceling bootstrap style
+    // seems that no effect without bootstrap
+    * {
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+        box-sizing: content-box;
+    }
+
+    label {
+        max-width: none;
+        margin-bottom: 0;
+    }
 
 </style>