Hi Bubblers, we have released a new Free Plugin called Switch (Toggle)/Checkbox. This plugin aims to enhance the experience of building Switch and Checkbox on Bubble.
What this plugin does:
Give you a highly customizable Switch/Checkbox. You can change most of the appearance attributes on those components. Those appearance attributes can be included in a reusable Style so you can have a consistent Switch/Checkbox across the app.
Very responsive. We ensure the element works with the new responsive engine. You can set the size of the Switch/Checkbox to your heart desire, but ensure that the Switch’s width is longer than the height for it to work correctly.
Developer experience optimized. We want you to be able to truly preview the element in the editor. Include a few Editor only toggle so you can checkout the different state of the Switch/Checkbox inside the Style Editor.
We would really love to get more feedback from you to further improve this plugin.
This thread URL is posted to the Bubble Plugin page.
We already implemented the tick in checkbox. However I forgot to check that the code wasn’t working on Chrome, due to the element making use of the mask-image CSS attributes. On Chrome this attribute has to prefixed with -webkit-. Anyway, we patched this in v1.2.4. Chrome user can enjoy this plugin now.
Hey @dennis1, you can set a dynamic value for the field “Disabled”
Or you can set a conditional that changes the “Disabled” field to “yes”
Note that in the Editor, changing the “Disabled” field value doesn’t change the visual (because the “Disabled” field is dynamic, so we don’t really know before hand if it disabled or not).
You can, however, preview how it looks like when disabled by checking this box:
You can also create a Reusable style for this element, and preview all the state of the element, right in the Style Editor.
Just found an error when using any of the two workflow actions (toggle or change value of) of this great plugin.
The following message appears in the debugger:
The plugin ✳️ Switch (Toggle) and Checkbox / action Toggle a Switch threw the following error: TypeError: instance.data.updateValue is not a function
at eval (PLUGIN_1680110374647x249108010620944400/---Switch--Toggle--and-Checkbox-element_action--Switch-Toggle-.js:3:15)
at https://*bubbleapp.com*/package/run_debug_js/71e19156e0ec8e02b68e493a82c822059025b0e9c51edd64a05f59c2929cf4de/xfalse/x28/run_debug.js:481:677 (please report this to the plugin author)
Just to you know.
Thanks for your incredible work for the community!
Thanks @pablo.r, I checked the issue and it seems to be some small issues with the instantiation of the Bubble component. It doesn’t break anything, but I patched the issue anyway. The patch is on the newest version.
I’m experiencing 2 issues and wondering if this will be an easy fix.
The following message appears in the debugger:
The plugin ✳️ Switch (Toggle) and Checkbox / element Custom Checkbox threw the following error: Error: Recursion when evaluating property AAo on element "Checkbox: Funnels List (Cell)"
at Object.evaluate_property (https://*bubbleapps.io*/package/run_debug_js/2effad61509201214c28cd45386a6cf800858c7713433a5ca835d37e54102499/xfalse/x25/run_debug.js:120:60725)
at _eval_prop (https://*bubbleapps.io*/package/run_debug_js/2effad61509201214c28cd45386a6cf800858c7713433a5ca835d37e54102499/xfalse/x25/run_debug.js:588:15978) (please report this to the plugin author
I can’t get the indeterminate state to work in run mode. I have conditionals on the element that triggers the indeterminate state.
The recursion issues seems to be a configuration issue. Judging from the stacktrace you send, the error doesn’t come from inside the element code, but from the Bubble code itself. Can you check if there is a circular configuration (maybe Checkbox A’s initial value is Checkbox B’s value, and Checkbox B’s initial value is Checkbox A’s value).
Can you screenshot or share some video on the configuration?
Re point 1 - Thanks, I managed to solve this error. For anyone wondering I had a condition on the checkbox that changed the border colour when the value of the checkbox was “yes”, which was throwing up the error.
Re point 2: I have messaged you privately with configuration details
There’s a bug I found. If a checkbox is hidden by default, then its default value is not false (even if the default value is unchecked) and rather it is null. There’s also no way to use the “default-to” operator on yes/no values. Can you please set that as the default? I have to use 1.5.2 to function, any version after breaks it.
Thank you for a great plugin! A small bug. The plugin seems to be causing regular radiobuttons to have a weird vertical offset - see image below Are you seeing the same? Would you know why? Removing the plugin fixes this issue (though of course I wouldn’t want to remove - because the plugin is great!)
Hi @chalam, thanks for the feedback. I have push another patch to deal with this issue. It should work on version 1.5.12. If not, please let me know.
A quick explanation on why this problem exists:
In CSS, there are two mode of sizing an element. You can size the element based on content-box, which mean the border of an element is not counted into the size of the element, or you can use border-box, where the border width of an element is also counted into the size of the element.
The industry standard right now is to use border-box. The logic to position the elements inside a checkbox is dependent on border-box sizing logic.
However, Bubble’s Radio Button use content-box sizing logic to size and position the radio button. When putting into the same app, this cause some conflict.
We have added the necessary patch to override Bubble’s Radio Button sizing logic.
There seems to be an issue with this plugin, although perhaps it’s my implementation.
As shown in the screenshot, the switch isn’t showing the correct values. From my testing, the default position of the switch doesn’t seem to represent the underlying data. Am I missing something?
Switch (Toggle) and Checkbox threw the following error: TypeError: instance.data.updateValue is not a function