CODEWITHSUNDEEP
cssionic-framework
Johan Walhout
Johan Walhout

Reputation: 1656

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

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?

Upvotes: 0

Views: 2809

Answers (2)

Proustibat
Proustibat

Reputation: 1851

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>

Upvotes: 3

Arun
Arun

Reputation: 1185

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

Upvotes: 0

Related Questions