ionic-frameworktogglebutton

ion-toggle : Reduce size of toggle button

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

Solution

  • 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.