I would like to style an ion-toggle like in the picture. I need a label and I need a toggle.
This is like a row with two columns, in the left column there is the label and in the right column there is the toggle. The columns should be both 50% and the content of the columns should be in the center. Like the picture.
My problem is, the ion-toggle is on the right site and ion-label have about 80% of the width, and i can not center them.
Some ideas? Here simple code for ion-item with ion-label and ion-toggle
<ion-item> <ion-label>OFF</ion-label> <ion-toggle [checked]="false" color="secondary"></ion-toggle> </ion-item>
I also tried to do something like that:
<ion-grid> <ion-row> <ion-col width-50 text-center>Off</ion-col> <ion-col width-50 text-center> <ion-item> <ion-toggle [checked]="false" color="secondary"></ion-toggle> </ion-item> </ion-col> </ion-row> <ion-grid>
But the problem here is, the column with the toggle keeps also the needed space for the ion-label, so the toggle is always on the right site.