Swipe to open side menu over list item not working

ionic-v1
1

I do not want to use a button to open the side menu, only via drag. The drag event works fine unless the area I’m dragging contains list items.

The main view of my app consists of a full screen of list items, therefore the only way to access the side menu is to drag over the header bar, which is not ideal.

I could implement an on-swipe-right directive on the list items, but this has problems as the drag open does not open with the motion of the drag, rather it completes in one single motion.

I’ve looked through the forum and it doesn’t seem like other people are having this problem, so I wonder, am I missing something obvious?

Here are a few key code samples:

<ion-side-menus ng-controller="MenuCtrl as menu" enable-menu-with-back-views="false">

 

<ion-list show-reorder="templates.currentlyReordering">
    <ion-item ng-repeat="template in templates.items track by template.key" ng-click="templates.toggleQuery($index)">
1 Like
2

I too face a similar problem.

But I can get swiping on a plain list to work just fine but I think if there is reorder/delete button for the list item, swiping the list to open the side menu doesn’t work.

If you remove the show-reorder part of the list, I think swiping should work, just to see if I am right.
But in anyway, hope there is a way to get it to work even with the reorder/delete.

3

I suspect that the problem is connected to scrollable ion-content. I have similar issue on my dashboard. It’was not scrollable and everything worked fine until i add pull to refresh function, making content scrollable. Now i have your same issue and i’m not able to open my side menù on swipe. The problem affected android only

4

@saip92 you’re right! My list items have a delete and edit button attached. When I remove these buttons the swipe to open side menu works.
Surely this must be a bug, I cannot see why the swipe should be disabled if the item contains buttons.

@suchigg, this is affecting all platforms for me.

5

Yup, stumbled across this issue myself. Hoping a fix could be implemented soon (would try it myself but just starting with Ionic/web stuff)

6

Thank you soo much, I’ve spent hours trying to get my options-buttons to appear. It seam show-reorder was interfering with the event listener.

7

I was able to get swipeable list items and swipeable side menu working together. So now when you swipe right on a list item in its default position the menu opens up.

I added this snippet to allow the list item touch listener to send the event to the other listners.

  // If you're dragging to the right and the list item is closed, pass the touch event up
  if (self._dragOp &&
      self._dragOp._currentDrag &&
      self._dragOp._currentDrag.startOffsetX === 0 &&
      e.gesture.direction == 'right') {
    return;
  }

You can add it to the _handleDrag function which should look like this in ionic v1.2.4:

/**
 * Process the drag event to move the item to the left or right.
 */
_handleDrag: function(e) {
  var self = this;

  if (Math.abs(e.gesture.deltaY) > 5) {
    self._didDragUpOrDown = true;
  }

  // If we get a drag event, make sure we aren't in another drag, then check if we should
  // start one
  if (!self.isDragging && !self._dragOp) {
    self._startDrag(e);
  }

  // If you're dragging to the right and the list item is closed, pass the touch event up
  if (self._dragOp &&
      self._dragOp._currentDrag &&
      self._dragOp._currentDrag.startOffsetX === 0 &&
      e.gesture.direction == 'right') {
    return;
  }

  // No drag still, pass it up
  if (!self._dragOp) {
    return;
  }

  e.gesture.srcEvent.preventDefault();
  self._dragOp.drag(e);
}