How to get Ionic toggle on the left hand side of the label?

0
votes

I have a simple toggle and label in a ion-item:

<ion-item>
    <ion-toggle checked="true"></ion-toggle>
    <ion-label>Aangemeld blijven</ion-label>
</ion-item>

I want to acheve that the toggle is placed on the left hand side of the label, but my result is: enter image description here

I tried the floating-left and right, but it doesn't help.

Do you have any suggestion?

2
cssionic-framework

2 Answers

2
votes

I think you should use item-start attribute, it works for me and it's probably the most recommanded.

<ion-item>
    <ion-toggle item-start checked="true"></ion-toggle>
    <ion-label>Aangemeld blijven</ion-label>
</ion-item>
0
votes

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;
}

Sample : https://codepen.io/codeandyou/pen/obvYOG