website demo Doesn't work on mobile

[linhtranvu]

Subject of the issue

Test on both iphone and android phone, none work

Your environment

• Run demo on websie
• Iphone and Android chrome

Steps to reproduce

Use phone to visit gridstackjs website

Expected behaviour

Demo should run

Actual behaviour

No demo work. So current library do not support mobile browser

[adumesny]

likely that touch lib isn't used on the website... I have not tested mobile, but it used to work I was told. Will have to take a look.

[naturtrunken]

Can confirm that it does not work. Tested on iPadOS 14.0.1 and iOS 12.4.8 and 14.0.1.

The hint about using the touch-punch.js didn't worked for me first. The original repo was not updated since 2014. However, I tried the newer fork from https://github.com/RWAP/jquery-ui-touch-punch - which also didn't worked. It throwed an error in the console that it could not find jquery.ui.

But JQuery UI is included in gridstack and was indeed loaded. So, I tried to remove the definition from the jquery.ui.touch-punch.js file (from the new repo) in line 22 and then it worked on all my mobile systems.

It seems for me, that although JQuery UI is loaded, it cannot be found via "jquery.ui" string. I'm not deep enough into JS to understand why this is here the case.

[adumesny]

@naturtrunken thanks! I might just need to include a patched touch-punch file along with jquery-ui to make it work out of the box (and update the live site).

[whazlewo]

I came here to see if this was a known issue. I'm glad there is a solution! Any idea when an update may be available? I'm hyped to incorporate this into a prototype I'm working on.

[adumesny]

@tobias-grasse I know you're using touch-punch.js with no issues so curious what version/fixes you had to make.

I’ve been using Gridstack inside a Vue.js app that focuses on mobile-first, no complaints here. You’ll likely have to tweak the CSS and there’s a limit to usability on smaller screens, but that’s a plain physical constraint

[linhtranvu]

To be honest return back to a jQuery version is more stable. I am using 0.6.4 and it really good

[adumesny]

@linhtranvu there is no reason you can't use the latest, which still uses jqueryui for drag&drop only (heck even upcoming 3.0 which will have a new html5 native drag&drop will also support legacy jquery-ui if you want). v0.6.4 is 400+ commits behind the latest :)
https://github.com/gridstack/gridstack.js/releases/tag/v0.6.4

[aryatekpia]

I am still having issue with grids having very small height on mobile. I am using gridstack.all.js according to the documentation. I also added jquery-ui-touch-punch but unlike @naturtrunken I am not getting any error in the console but the height issue on mobile devices is not fixed.

Any advise will be appreciated.

[adumesny]

@aryatekpia you can set cellHeight yourself to control the row height... recommend you use the latest 3.0.0 (use gridstack-jq.js which is the same as all.js was)

[aryatekpia]

Thanks @adumesny for your prompt reply. playing with cellHeight and setting it to something like this grid.cellHeight(grid.cellWidth() * 1.2); fixes the hight on mobile however the problem is that it messes up the x,y position resulting on the grid items to lay on top of each other.

[adumesny]

@aryatekpia please file a separate bug as this is likely NOT a mobile issue, but a oneColumnMode and how you init your grid, or missing some CSS, or... with reproduceable case. If boxes overlap, it's a CSS issue.

[aryatekpia]

okey thanks I will try to make reproduceable demo.