Preventing swipe from propagating from ion-scroll to ion-list


#1

Hi, I have a list of <ion-items> that use ion-option-button. One of the list items has an <ion-scroll>. I’d like to make sure a swipe on the image list (if shown) does not result in the option buttons to show up.

I’ve set up a simplified codepen here - I can trap the swipe, but trying to prevent propagation doesn’t help.

Any thoughts? Thanks


#2

i have fixed your codepen … please check your ion-option-button tag for reference


#3

Thanks @harshit886 - what is your modified codepen url? You can’t edit my codepen directly - you’ll have to save it and it assigns a new url.


#4

sorry for that …url is https://codepen.io/anon/pen/zNYomV. check ion-option-button tag


#5

Thanks for your help. The problem with using ng-show or ng-if is that the list is still receiving the slide event and if you pull the set of images to the left, you’ll see the list cell also scroll to the left making space for the button (except that instead of showing the button, it shows empty space). https://codepen.io/pliablepixels/pen/qRBjrq

The solution I have currently is to turn off the option button completely using $ionicListDelegate.canSwipeItems(false); when the images are displayed, but this operation is on the full list, not just the cell, so it causes issues if I try and swipe on another cell which does not have images enabled, which gets messier as then I need to figure out at my application level code where the swipe occurred. A cleaner solution would be if my <ion-scroll> image list simply blocked the propagation.