Forum Academy Marketplace Showcase Pricing Features

Why is the Checkbox so teeny tiny and ridiculous size?

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?

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.

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.

1 Like

@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:

Wow, I just used the CSS tool and then tried the Jscript PlugBubble option both worked great.

This is amazing. So simple yet brilliant. You are the master!

I would stick with the CSS Tools option, it means you wont run into any issues with the code above should jQuery not be included on a page or of course use plain JS, Im not sure the exact features in @AliFarahat’s new plugin but im pretty sure it gives you options to add SVG image styles - this method is good for the custom stuff or late night codepen finds.

1 Like

Increase the font size and the checkbox will grow