Forum Academy Marketplace Showcase Pricing Features

How to change the size of ionic checkboxes

Need help
#1

How can we change the size of ionic checkboxes??

I’d like to make them a bit smaller.

#2

Use icons?

#3

But if an element exists which has built in states, it seems a bit silly having to use multiple icons on top of each other and mess with conditions… Especially as the form we are creating has lots of check boxes

#4

I know, but now it`s the only way I know, for now (maybe custom HTML? But I don’t know what to do with the CSS…).

I remembered some people (including me) complaining about the lack of options with dropdowns or menus, and that time some suggested to mimic those with repeating groups, or focus groups and buttons etc.
That time I just reject the idea, since it would give me a lot of work to do the custom states etc, so I just dealt with the lack of styling options.
3 months later and now it`s just makes sense - with a little work I build the functions and now I can use any icon or image to design my dream’s UI. There’s no animation, but if you care enough you can try using animated gifs

#5

I managed to find a solution to this issue. For anyone trying to change the size of the Ionic Checkbox I’ve linked the code below. All you have to do is drop a HTML element on the page, for it to resize the element.

  1. The first part resizes the overall DIV so that it doesn’t push content surrounding it. I had to override with !important, as the checkbox uses all those styles.

  2. The second part changes the checkbox size to 16x16px (or whatever you’d like).

  3. The third part changes the tick size, inside the checkbox. This requires a little tinkering to find the right combination to suit the checkbox size above.

     <style>
     .ionic-IonicCheckbox{
         width: 16px !important;
         height: 16px !important;
         min-width: 16px !important;
         min-height: 16px !important;
         max-width: 16px !important;
         max-height: 16px !important;
     }
     .ionic-checkbox input, .checkbox-icon{
         max-width: 16px !important;
         max-height: 16px !important;
     }
     .ionic-checkbox input:after, .ionic-checkbox-icon:after
     {
         top: 33% !important;
         left: 25% !important;
         width: 6px !important;
         height: 3px !important;
     }
 </style>