ion-toggle : Reduce size of toggle button

Question

Is there any way to reduce the size of ion-toggle button. The picture depicts my problem.

Answer 1

In case you are creating toggle button like this:

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

Use .toggle .track class to adjust following css properties:

width: 51px;
height: 31px;

and then .toggle .handle to adjust following css properties:

width: 20px;
height: 20px;
border-radius: 20px;
top: 7px;
left: 7px;

You may also add your own class name to change appearance of specific toggle buttons.

In case you are using ion-toggle directive as in

<ion-toggle ng-model="airplaneMode" class="toggle-small" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

You can try to see if applying class="toggle-small" changes appearance as per your need. However, above class modifications can still be applied to this directive.

Answer 2

try this

ion-toggle {
  zoom: 0.8;
}

Answer 3

From what I can tell you will need to customize three CSS definitions: .toggle-icon, .toggle-inner, and .toggle-checked .toggle-inner.

• .toggle-icon: width and height change the size of the toggle "track"
• .toggle-inner: width and height change the size of the toggle "button" that slides in the track
• .toggle-checked .toggle-inner.: transform: translate3d(27px, 0, 0) The first arg changes the position of the button when it is pressed