Resizing/Styling Toogle Button
Application Type
Traditional Web

Hi just want to know If you know what is the class of the circle inside the toggle button I'm trying to resize it but I can't resize the circle inside it. Hope you can help me. Thanks!

1.PNG

mvp_badge
MVP
Solution

Hi Ronald,


Ah, I hadn't understand your issue.

In any case, my approach is valid. If you follow the same steps and check the circle element, you will find out the CSS being applied and how to override it using the same approach, like in the image below:


Following the same rationale, you should include on your theme a CSS like this (now tweak it to your use case):

.toggle-button-after{
    height: 13px;
    width: 13px;
    left: 8px;
}

Kind Regards,
João

mvp_badge
MVP

Hi Ronald,


You can inspect your browser using Chrome Developer Tools (right click and choose the option Inspect or use the F12 shortcut), select the element (using the select icon on top left corner of the open pane) to understand which style is being applied, like on the image below:


Doing so, one can quickly see the style being applied that controls the height, so you can include a piece of CSS in your theme to override the default behavior. Taking a look at this example, if you include the following CSS it would change the height of the toggle widget.


.toggle-button {
    height: 32px;
}


Kind Regards,
João

Already did that sir my problem is the circle inside of the toggle button. I can resize the background of it but not the circle inside of it just like the picture below.

mvp_badge
MVP
Solution

Hi Ronald,


Ah, I hadn't understand your issue.

In any case, my approach is valid. If you follow the same steps and check the circle element, you will find out the CSS being applied and how to override it using the same approach, like in the image below:


Following the same rationale, you should include on your theme a CSS like this (now tweak it to your use case):

.toggle-button-after{
    height: 13px;
    width: 13px;
    left: 8px;
}

Kind Regards,
João

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.