Align the ion-toggle text on right side

Toogles - ion-toggle provide a feature to show animated switch button . Its very useful when we have true or false behavior in our application ,its looks very good.  Its return Boolean value when you do on/off.   Its Allows dragging of the switch’s nub.

toggle-class is used to give any style to toogles.


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

Use these two class to override and show ion-toogle text on right side

.item-toggle .toggle
   left: 16px !important;
.item-toggle .ng-binding
   margin-left: 98%  !important;

Codepen Example


Align the ion-toggle text on right side

ion-toggle left position

Next Post »
Thanks for your comment