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 pi…

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>

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.

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.

HI @cowontherun Did you find out how to change the check boxes or radio button styles? If you did, would you mind sharing?

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. I added the plugin Added a check box on the page Added the ID in the element On page load act…

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 …

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

Hi, no I used Jarred’s plugin for this which is great. Correction: Wasn’t Jarrad’s plugin I used.

if you did want to use the PlugBubble code block you could do this, $('head').append('<style id="PlugBubble">input[type=checkbox] {transform: scale(2);-ms-transform: scale(2);-webkit-transform: scale(2);padding: 10px;}</style>'); Thanks @cowontherun , appreciate the feedback.

Why is the Checkbox so teeny tiny and ridiculous size?

Idea

cowontherun February 21, 2018, 7:23am 23

@jarrad @StevenM Actually sorry this is NOT the checkbox plugin I used!

(sorry jarrad!)

The one I used was @AliFarahat’s plugin which was in Beta. Don’t know if it’s out yet.

See:

Topic		Replies	Views
Style size of checkboxes Idea	6	1184	February 25, 2024
Beta New CheckBox & Radio Plugin Beta Showcase	60	6524	October 22, 2021
How to change the size of ionic checkboxes Need help	5	7012	June 21, 2023
Check box sizing Need help	5	151	July 21, 2024
How to style elements like checkbox? Need help	1	804	August 29, 2022

Why is the Checkbox so teeny tiny and ridiculous size?

Related topics