Why is the Checkbox so teeny tiny and ridiculous size?

Why should I have to download an entire plugin just because the default checkbox is so ridiculously small?

It looks unprofessional and students learning Bubble at our Meetup always point it out and I have to tell them to ignore it while attempting to convey to them that Bubble is a sophisticated piece of software.

Can you please allow at least css styling so I can demo a product that looks good that still uses out of the box styles.

! Jess

4 Likes

Or you could just make your own using objects and conditions.

uh yeahhhh…or we could just have a decently sized default checkbox

13 Likes

It’s the global default checkbox. It varies depending on browser.

And the global size is ‘tiny’.

Come on, even frigging Wix displays decent checkboxes…

2 Likes

Yep. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked

https://codepen.io/bbodine1/pen/novBm

1 Like

You can probably build a plugin with those checkboxes :rofl:

Argggggggggh…

1 Like

How about the ionic ones?

1 Like

a. Looks like a radio button (non-web standard)
b. Plugin also contains icons I don’t need

J.

Looks like your prayers are answered:

either that, or you can use the plug bubble plugin, and on page load add this block.

<style id="PlugBubble">
input[type=checkbox] {
    transform: scale(2);
    -ms-transform: scale(2);
    -webkit-transform: scale(2);
    padding: 10px;
}
</style>
1 Like

Lol. Nice work.

Will downloading this plugin but only using one or two items add significantly to the size of an app and affect response speed?

my PlugBubble plugin adds less than 2 lines of code, so that plus the above shouldn’t effect your app at all.

1 Like

Cool that will work for me. Will try it tomorrow.

@emmanuel It would be nice to have a larger checkbox out-of-the-box for non-coder students who are building apps for the browser.

3 Likes

HI @cowontherun

Did you find out how to change the check boxes or radio button styles?

If you did, would you mind sharing?

1 Like

HI @jarred

I am just looking at your example above and have added in the plugin and on page load added the code above, but its doesn’t appear to make any difference. I am sure I am doing something wrong.

  1. I added the plugin
  2. Added a check box on the page
  3. Added the ID in the element
  4. On page load action added the plugin in the workflow and inserted the above code.

Did I miss something?

Many thanks!

Just to update: I am also getting a Javascript error on page load.

I think I saw this before when A plugin downloaded dropped the Header code which brings in the JS library - may be related.

Hi Steven,

So add a normal checkbox on the page.

Then add the plugin ‘checkbox’ on the page somewhere out of the way, eg. down bottom of page. The plugin checkbox is not visible to the User, it just transforms the normal checkbox to whatever you want.

Jess

Correction: Whoops. These instructions are for @AliFarahat’s checkbox plugin, not Jarrads.

1 Like

Sorry, you want CSS Tools, use the add style to header action.