Skip to content

Commit

Permalink
Merge pull request #117 from palcarazm:palcarazm/issue116
Browse files Browse the repository at this point in the history 
fix: Responsive Button Width
  • Loading branch information
@palcarazm
palcarazm authored Feb 21, 2023
2 parents 2f55ee6 + 59c0924 commit 62d8f47
Show file tree
Hide file tree
Showing 11 changed files with 58 additions and 47 deletions.
18 changes: 9 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,18 @@

#### Library Distributions

| Branch | Bootstrap Support | Last Release |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [bootstrap5-toggle v5](https://github.com/palcarazm/bootstrap5-toggle/tree/v5) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v5?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| [bootstrap5-toggle v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v4?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| [bootstrap5-toggle v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [![Bootstrap 4](https://img.shields.io/static/v1?label=bootstrap&message=%5E4.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/4.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v3?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| Version | Bootstrap Support | Last Release | End of Life |
| :----------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [v5](https://github.com/palcarazm/bootstrap5-toggle/tree/v5) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v5?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv5)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |
| [v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v4?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv4)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |
| [v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [![Bootstrap 4](https://img.shields.io/static/v1?label=bootstrap&message=%5E4.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/4.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v3?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv3)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |

See EOL for each version in [Security Policy Page](https://github.com/palcarazm/bootstrap5-toggle/security/policy).

# Demos

**Demos and API Docs:** https://palcarazm.github.io/bootstrap5-toggle/

![Demo GIF](img/bootstrap5-toggle-demo.gif)

# Related Bootstrap Plugins

<div align="center">
Expand All @@ -46,6 +45,7 @@ See EOL for each version in [Security Policy Page](https://github.com/palcarazm/
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [CDN](#cdn)
- [ECMAS Interface](#ecmas-interface)
Expand Down Expand Up @@ -165,8 +165,8 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
| `offstyle` | string | "secondary" | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
| `onvalue` | string | _null_ | Sets on state value |
| `offvalue` | string | _null_ | Sets off state value |
| `ontitle` | string | _null_ | Title of the on toggle |
| `offtitle` | string | _null_ | Title of the off toggle |
| `ontitle` | string | _null_ | Title of the on toggle |
| `offtitle` | string | _null_ | Title of the off toggle |
| `style` | string | | Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. |
| `width` | integer | _null_ | Sets the width of the toggle. if set to _null_, width will be auto-calculated. |
| `height` | integer | _null_ | Sets the height of the toggle. if set to _null_, height will be auto-calculated. |
Expand Down
20 changes: 9 additions & 11 deletions README.template.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,18 @@

#### Library Distributions

| Branch | Bootstrap Support | Last Release |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [bootstrap5-toggle v5](https://github.com/palcarazm/bootstrap5-toggle/tree/v5) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v5?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| [bootstrap5-toggle v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v4?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| [bootstrap5-toggle v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [![Bootstrap 4](https://img.shields.io/static/v1?label=bootstrap&message=%5E4.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/4.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v3?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) |
| Version | Bootstrap Support | Last Release | End of Life |
| :----------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [v5](https://github.com/palcarazm/bootstrap5-toggle/tree/v5) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v5?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv5)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |
| [v4](https://github.com/palcarazm/bootstrap5-toggle/tree/v4) | [![Bootstrap 5](https://img.shields.io/static/v1?label=bootstrap&message=%5E5.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/5.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v4?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv4)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |
| [v3](https://github.com/palcarazm/bootstrap5-toggle/tree/v3) | [![Bootstrap 4](https://img.shields.io/static/v1?label=bootstrap&message=%5E4.0.0&color=informational&logo=bootstrap&logoColor=white)](https://getbootstrap.com/docs/4.0) | [![Latest release](https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v3?logo=github)](https://github.com/palcarazm/bootstrap5-toggle/releases) | [![EOL](https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv3)](https://github.com/palcarazm/bootstrap5-toggle/security/policy) |

See EOL for each version in [Security Policy Page](https://github.com/palcarazm/bootstrap5-toggle/security/policy).

# Demos

**Demos and API Docs:** https://palcarazm.github.io/bootstrap5-toggle/

![Demo GIF](img/bootstrap5-toggle-demo.gif)

# Related Bootstrap Plugins

<div align="center">
Expand All @@ -46,8 +45,7 @@ See EOL for each version in [Security Policy Page](https://github.com/palcarazm/
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Bootstrap 5 Toggle](#bootstrap-5-toggle)
- [Library Distributions](#library-distributions)
- [Bootstrap 5 Toggle](#bootstrap-5-toggle) - [Library Distributions](#library-distributions)
- [Demos](#demos)
- [Related Bootstrap Plugins](#related-bootstrap-plugins)
- [Installation](#installation)
Expand Down Expand Up @@ -169,8 +167,8 @@ EX: Initialize id `chkToggle` with a single line of JavaScript.
| `offstyle` | string | "secondary" | Style of the off toggle. Possible values are: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark` and with `outline-` prefix |
| `onvalue` | string | _null_ | Sets on state value |
| `offvalue` | string | _null_ | Sets off state value |
| `ontitle` | string | _null_ | Title of the on toggle |
| `offtitle` | string | _null_ | Title of the off toggle |
| `ontitle` | string | _null_ | Title of the on toggle |
| `offtitle` | string | _null_ | Title of the off toggle |
| `style` | string | | Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference. |
| `width` | integer | _null_ | Sets the width of the toggle. if set to _null_, width will be auto-calculated. |
| `height` | integer | _null_ | Sets the height of the toggle. if set to _null_, height will be auto-calculated. |
Expand Down
2 changes: 1 addition & 1 deletion css/bootstrap5-toggle.min.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file removed img/bootstrap5-toggle-demo.gif
View file
Binary file not shown.
30 changes: 17 additions & 13 deletions js/bootstrap5-toggle.ecmas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
Loading

0 comments on commit 62d8f47

Please sign in to comment.