Make Ionic Toggle smaller?

[lantzgould]

Hey everyone,

Does anyone know how to make the Ionic Icon smaller? Or know of any nicer looking options that has the ability to adjust size?

[manikandan]

Hi @lantzgould,

Set some specific document id (like Test1234) for this icon . And added html element near to this tag.
place below style to html element, then the Toggle will get small.

#Test1234 .ionic-track{ width: 40px; height:20px; border-radius:20px; } #Test1234 .ionic-handle{ width: 17px; height: 17px; border-radius: 17px; }

[lantzgould]

Thank you!

[stieger]

Can someone specify how to execute the solution? Thanks.

[lantzgould]

Hi @stieger,

Here’s how I usually do it:

Download the plugin:

CSS Tools Plugin for Bubble, by Zeroqode

1. Drop a CSS element on the page
2. Start workflow on page load
   
3. Give the toggle (using Ionic Icons Plugin) an element ID
   
4. On the workflow, use this:

#togprice .ionic-track{ width: 40px; height:20px; border-radius:20px; } #togprice .ionic-handle{ width: 16px; height: 16px; border-radius: 16px; }

The ID can be anything you want. You can adjust the height and weight to your liking too.

Hope this helps.

-Brandon

[stieger]

Thanks a lot! I wasn’t aware of the plugin…

• Peter

[ryley.randall]

Feel free to try this plugin too if you like

Better Toggle Plugin for Bubble

[lantzgould]

Nice! Hadn’t seen this one. Thanks for the share.

[stieger]

Very nice! Right what I was looking for!
Thanks for sharing.

[JohnMark]

Hi @ryley.randall

It will be great to add auto-binding, so I can switch

[JohnMark]

Hi @lantzgould

How to fix the distance of the circle (handle)?

---

---

off position is ok.

---

[lantzgould]

Hi @JohnMark!

This one is making me scratch my head for some reason… @AliFarahat any css expertise help you can provide?

If I figure this out I’ll reply back here

[JohnMark]

I found this, but can make it work

ion-toggle {
   zoom:0.8;
}

[lantzgould]

Hmmm…

[JohnMark]

@lantzgould According to Chrome, we are near

---

---

I used left: 0%, look the result

[lantzgould]

LOL! Still scratching my head on this… adjusting the numbers shouldn’t make that overflow only on one side

[JohnMark]

Scratching in progress Pretty sure is about position: absolute.

[mabireclement]

Hi @JohnMark @lantzgould and futur visitor !

In order to fix the issue, play with the transform property and try to modify the translate3d function parameters.

I did this for a 30px width toggle :

[Naiko]