Repository navigation
website demo Doesn't work on mobile #1413
Description
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
Activity
adumesny commentedon Oct 16, 2020
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 commentedon Oct 24, 2020
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 commentedon Oct 24, 2020
@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 commentedon Nov 13, 2020
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 commentedon Nov 13, 2020
@tobias-grasse I know you're using touch-punch.js with no issues so curious what version/fixes you had to make.
linhtranvu commentedon Nov 16, 2020
To be honest return back to a jQuery version is more stable. I am using 0.6.4 and it really good
adumesny commentedon Nov 16, 2020
@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 commentedon Dec 1, 2020
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 commentedon Dec 1, 2020
@aryatekpia you can set
cellHeightyourself 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 commentedon Dec 1, 2020
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 commentedon Dec 1, 2020
@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 commentedon Dec 2, 2020
okey thanks I will try to make reproduceable demo.
[-]Dont work on mobile browser[/-][+]website demo Doesn't work on mobile[/+]davidh07 commentedon Jan 24, 2021
Great product. Any idea when the mobile version will be working. Also how do you get the js files from the downloads. It's not clear. Is there a cdn?
Thanks
adumesny commentedon Jan 24, 2021
@davidh07 read the doc about npm installing. As for fixing, I have to setup mobile dev testing which I have not done before...
web: mobile fix
web: more mobile fix
initial jquery.ui.touch-punch file
support mobile in jq version out of the box