Ion-toggle size Ionic4

Ionic Framework
1

Hello,

I’m desperate to change the size of a toggle (width: 100%;). the handle is blocked. Does anyone have a solution?
thx

html

<ion-tabs>

  <ion-toolbar no-padding>
        <ion-grid class="grid">
          <ion-row>
            <ion-col text-center>
              <h3 *ngIf="toggleValue==false" class="left">Left</h3>
            </ion-col>
            <ion-col text-center>
                  <h3>
                    <ion-toggle class="toggle" [(ngModel)]="toggleValue"></ion-toggle>
                  </h3>
            </ion-col>
            <ion-col text-center>
              <h3 *ngIf="toggleValue!==false" class="right">Right</h3>
            </ion-col>
          </ion-row>
        </ion-grid>
  </ion-toolbar>

scss

.toggle{
  --background:#d33939;
  --background-checked:#10dc60;
  width: 100%;
}
2

share image of what kind of view you want

3

I put a toggle in ion-grid (with 3 ion-col). The toggle is in the center and I would like it to make 100% (width:100%) of the ion-col. The problem is that handle doesn’t slide from one side to the other.

toggle

4

Some options to try, flavour to taste.

ion-toggle {
  zoom: 0.8;
}

Or, to address your specific issue on last post, being you can customise/adjust these 3 css defs:

  • .toggle-icon - width and height adjusts the size of the toggle track
  • .toggle-inner - width and height change the size of the toggle selector that slides in the track
  • .toggle-checked .toggle-inner. - transform: translate3d(27px, 0, 0) 1st arg changes the position of the button when pressed.

I am actually in the process of experimenting for fit. Please let me know if/what works for you.