Grid Stack items prevent touch swipe

Bug #1930624 reported by Lorenz Ulrich
6
This bug affects 1 person
Affects Status Importance Assigned to Milestone
Mahara
Fix Released
High
Unassigned
20.04
Fix Released
High
Unassigned
20.10
Fix Released
High
Unassigned
21.04
Fix Released
High
Unassigned

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

Revision history for this message
Lorenz Ulrich (lorenzulrich) wrote :
Revision history for this message
Kristina Hoeppner (kris-hoeppner) wrote (last edit ):

Hi Lorenz,

Thank you for reporting this problem. We have received a similar report as well, are looking into a solution and will review yours.

For Mahara 21.10 we are looking into upgrading the Gridstack library and will check if the fix is still needed then. So far, we have the following in code review https://reviews.mahara.org/11815 and you are welcome to give it a go and check it out already for general testing.

Thank you
Kristina

Changed in mahara:
status: New → Confirmed
importance: Undecided → High
Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "master" branch: https://reviews.mahara.org/11872

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "master" branch: https://reviews.mahara.org/11873

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/11873
Committed: https://git.mahara.org/mahara/mahara/commit/4a0a67c8556184d90705bac708faf7699da143f4
Submitter: Robert Lyon (<email address hidden>)
Branch: master

commit 4a0a67c8556184d90705bac708faf7699da143f4
Author: Lorenz Ulrich <email address hidden>
Date: Thu Jul 22 17:12:42 2021 +1200

Bug 1930624: Prevent touchswipe on Gridstack items

Via css

Change-Id: I9adda4b1fe27a7e0bfcc7c48a52e3f98e3fb6015

Revision history for this message
Mahara Bot (dev-mahara) wrote : A patch has been submitted for review

Patch for "21.04_STABLE" branch: https://reviews.mahara.org/11901

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "20.10_STABLE" branch: https://reviews.mahara.org/11902

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Patch for "20.04_STABLE" branch: https://reviews.mahara.org/11903

Revision history for this message
Mahara Bot (dev-mahara) wrote : A change has been merged

Reviewed: https://reviews.mahara.org/11901
Committed: https://git.mahara.org/mahara/mahara/commit/e072e5412e5f7e2f792f78860d814881d03186a0
Submitter: Robert Lyon (<email address hidden>)
Branch: 21.04_STABLE

commit e072e5412e5f7e2f792f78860d814881d03186a0
Author: Lorenz Ulrich <email address hidden>
Date: Thu Jul 22 17:12:42 2021 +1200

Bug 1930624: Prevent touchswipe on Gridstack items

Via css

Change-Id: I9adda4b1fe27a7e0bfcc7c48a52e3f98e3fb6015
(cherry picked from commit 4a0a67c8556184d90705bac708faf7699da143f4)

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/11902
Committed: https://git.mahara.org/mahara/mahara/commit/d4ea32074e65cc9d5771824a84cafdd0ba8ada96
Submitter: Robert Lyon (<email address hidden>)
Branch: 20.10_STABLE

commit d4ea32074e65cc9d5771824a84cafdd0ba8ada96
Author: Lorenz Ulrich <email address hidden>
Date: Thu Jul 22 17:12:42 2021 +1200

Bug 1930624: Prevent touchswipe on Gridstack items

Via css

Change-Id: I9adda4b1fe27a7e0bfcc7c48a52e3f98e3fb6015
(cherry picked from commit 4a0a67c8556184d90705bac708faf7699da143f4)

Revision history for this message
Mahara Bot (dev-mahara) wrote :

Reviewed: https://reviews.mahara.org/11903
Committed: https://git.mahara.org/mahara/mahara/commit/4f7b30b5fc6055a04bd12cd68f0413f653a5cd55
Submitter: Robert Lyon (<email address hidden>)
Branch: 20.04_STABLE

commit 4f7b30b5fc6055a04bd12cd68f0413f653a5cd55
Author: Lorenz Ulrich <email address hidden>
Date: Thu Jul 22 17:12:42 2021 +1200

Bug 1930624: Prevent touchswipe on Gridstack items

Via css

Change-Id: I9adda4b1fe27a7e0bfcc7c48a52e3f98e3fb6015
(cherry picked from commit 4a0a67c8556184d90705bac708faf7699da143f4)

no longer affects: mahara/21.10
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.