Cant scroll content using Ion-Toggle (ionic 7)

Ionic Framework Ionic Vue
1

I just upgraded to Ionic 7 and got an issue using ion-toggle. I can not scroll my content when using Ion-Toggle. I also tried to put them inside an ion-list, but that did not change anything about it. Under and above this list everything works fine and i can scroll like usual.

Here is an example:

<ion-list>
          <ion-item lines="full">
            <ion-toggle justify="space-between" v-model="ionic" color="success">Ionic-Toggle</ion-toggle>
          </ion-item>

          <ion-item lines="full">
            <ion-toggle justify="space-between" v-model="basic" color="success">Basic Toggle</ion-toggle>
          </ion-item>
        </ion-list>
2

Can you provide the full vue component? That will allow us to see the full page structure, styles applied, and how your variables are being set.
Even better: create a stackblitz that demonstrates the scrolling issue.
Here is my stackblitz of scroll working in Ionic 7 with toggles. You can fork it and try to duplicate your issue.

3

Same problem. Problem also exits on official docu:

Tested with iOS, if your scroll position is on ion-item with ion-toggle you can’t scroll.
If you have a list full of ion-items with ion-toogles you can’t not scroll in list

4

any news on this??? i’m having having the same problem

5

I found a fix for this:

<style scoped>
/* Fixing ionic issue where touch-action: none; is set by default preventing scroll interactions */
ion-toggle {
  touch-action: auto;
}
</style>

I’m not completely sure why touch-action is set to none by default, but for what I can see it works fine.

2 Likes
7

Worked for me, thank you!!

1 Like