Toggle style returns to normal checkbox intermittently
WebCoderUk opened this issue · 8 comments
On some reloads the style for the toggles changes back to a normal checkbox anyone else experienced this and have a fix?
This is news to me. If anyone else is experiencing this, feel free to chime in.
Happens to be whenever I put it in a v-for loop using vuejs.
While using it, if I navigate directly to the page it renders, but when routing it displays as a normal checkbox. I am using Angular 8
I tried loading the js in the onInit method, and that would render the toggle, but on a page reload or direct route, it would not toggle. The fix for me was to use the bootstrapToggle API to set it to on or off in the onInit method. It is a bit clunky to work that way since you have to mind the initial state and change it on init, but it works.
Using the Initialize with JavaScript option seems to have solved the issue on my part, issue only happens when you use the Initialize with HTML option
the issue happened to mee too.
i have multiple toggle buttons, that has exact same code, most of them loads, and some stay as a checkbox, when i reload the page, they all reload!
I'm having a similar experience. Event with 18 toggles on the same page, the plain checkbox with no styling is rendered first and then the toggle styling is applied after about a split second. This is a visible and abrupt change from plain checkbox to styled toggle. This is happening on the latest versions of Chrome, Edge (Chromium version), Brave, and Opera at time of writing and my machine is a Ryzen5 six-core with 16GB of RAM running W10. Same issue on my Android phone which is a Pixel running the latest version of Android. It is also happening on this page for me: https://gitbrent.github.io/bootstrap4-toggle/
It's clearly a bug, no consistent behavior, but it always happens.
I gave up on this version and moved to bs5 where it has toggle supported natively.