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>
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.
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
any news on this??? i’m having having the same problem
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
Worked for me, thank you!!
1 Like