← Back to team overview

mahara-contributors team mailing list archive

[Bug 1930624] [NEW] Grid Stack items prevent touch swipe

 

Public bug reported:

The JQuery UI components used in Grid Stack prevent touch swipe for
scrolling on mobile devices. The actual tiles created by Grid Stack
contain the class "ui-draggable-handle" which disables any touch action:

.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}

As you can see in the screenshot attached to the issue, having multiple
tiles will confuse users because they can only scroll outside of the
actual tile. The more width and the less space the tiles have, it
becomes almost impossible to scroll on a smartphone.

We used the following workaround to patch this problem:

.grid-stack>.grid-stack-item>.grid-stack-item-content {
    touch-action: auto!important;
}

However it would be better to solve this cleanly.

Mahara version: 20.04, but according to source unchanged in current
versions

** Affects: mahara
     Importance: Undecided
         Status: New

-- 
You received this bug notification because you are a member of Mahara
Contributors, which is subscribed to Mahara.
Matching subscriptions: mahara-contributors
https://bugs.launchpad.net/bugs/1930624

Title:
  Grid Stack items prevent touch swipe

Status in Mahara:
  New

Bug description:
  The JQuery UI components used in Grid Stack prevent touch swipe for
  scrolling on mobile devices. The actual tiles created by Grid Stack
  contain the class "ui-draggable-handle" which disables any touch
  action:

  .ui-draggable-handle {
      -ms-touch-action: none;
      touch-action: none;
  }

  As you can see in the screenshot attached to the issue, having
  multiple tiles will confuse users because they can only scroll outside
  of the actual tile. The more width and the less space the tiles have,
  it becomes almost impossible to scroll on a smartphone.

  We used the following workaround to patch this problem:

  .grid-stack>.grid-stack-item>.grid-stack-item-content {
      touch-action: auto!important;
  }

  However it would be better to solve this cleanly.

  Mahara version: 20.04, but according to source unchanged in current
  versions

To manage notifications about this bug go to:
https://bugs.launchpad.net/mahara/+bug/1930624/+subscriptions


Follow ups