fix: Responsive Button Width

Fixes #116
palcarazm · Feb 21, 2023 · 58d0b72 · 58d0b72
1 parent 2f55ee6
commit 58d0b72
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 27 deletions.
diff --git a/css/bootstrap5-toggle.min.css.map b/css/bootstrap5-toggle.min.css.map
diff --git a/js/bootstrap5-toggle.ecmas.js b/js/bootstrap5-toggle.ecmas.js
@@ -259,19 +259,23 @@
       {
         // A: Set style W/H
         // NOTE: `offsetWidth` returns *rounded* integer values, so use `getBoundingClientRect` instead.
-        ecmasToggle.style.width =
-          (this.options.width ||
-            Math.max(
-              ecmasToggleOn.getBoundingClientRect().width,
-              ecmasToggleOff.getBoundingClientRect().width
-            ) +
-              ecmasToggleHandle.getBoundingClientRect().width / 2) + "px";
-        ecmasToggle.style.height =
-          (this.options.height ||
-            Math.max(
-              ecmasToggleOn.getBoundingClientRect().height,
-              ecmasToggleOff.getBoundingClientRect().height
-            )) + "px";
+        ecmasToggle.style["min-width"] = `${
+          Math.max(
+            ecmasToggleOn.getBoundingClientRect().width,
+            ecmasToggleOff.getBoundingClientRect().width
+          ) +
+          ecmasToggleHandle.getBoundingClientRect().width / 2
+        }px`;
+        if (this.options.width) {
+          ecmasToggle.style.width = `${this.options.width}px`;
+        }
+        ecmasToggle.style["min-height"] = `${Math.max(
+          ecmasToggleOn.getBoundingClientRect().height,
+          ecmasToggleOff.getBoundingClientRect().height
+        )}px`;
+        if (this.options.height) {
+          ecmasToggle.style.height = `${this.options.height}px`;
+        }
 
         // B: Apply on/off class
         ecmasToggleOn.classList.add("toggle-on");

diff --git a/js/bootstrap5-toggle.ecmas.min.js b/js/bootstrap5-toggle.ecmas.min.js
diff --git a/js/bootstrap5-toggle.ecmas.min.js.map b/js/bootstrap5-toggle.ecmas.min.js.map
diff --git a/js/bootstrap5-toggle.jquery.js b/js/bootstrap5-toggle.jquery.js
@@ -214,14 +214,23 @@
     // 8: Set button W/H, lineHeight
     {
       // A: Set style W/H
-      let width =
-        this.options.width ||
-        Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth()) +
-          $toggleHandle.outerWidth() / 2;
-      let height =
-        this.options.height ||
-        Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight());
-      this.$toggle.css({ width: width, height: height });
+      this.$toggle.css(
+        "min-width",
+        `${
+          Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth()) +
+          $toggleHandle.outerWidth() / 2
+        }px`
+      );
+      this.$toggle.css(
+        "min-height",
+        `${Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())}px`
+      );
+      if (this.options.width) {
+        this.$toggle.css("width", this.options.width);
+      }
+      if (this.options.height) {
+        this.$toggle.css("height", this.options.height);
+      }
 
       // B: Apply on/off class
       $toggleOn.addClass("toggle-on");

diff --git a/js/bootstrap5-toggle.jquery.min.js b/js/bootstrap5-toggle.jquery.min.js
diff --git a/js/bootstrap5-toggle.jquery.min.js.map b/js/bootstrap5-toggle.jquery.min.js.map
diff --git a/test/test-loader.js b/test/test-loader.js
@@ -447,7 +447,7 @@ function initTestApiContructor() {
           onstyle: "outline-success",
           offstyle: "outline-danger",
           style: "mystyle",
-          width: 100,
+          width: 150,
           height: 75,
           tabindex: -1,
         };