Open OkayX6 opened 3 years ago
@OkayX6 Hi! When you say it doesn't work in mobile mode, you mean the chrome dev button to "switch" to mobile? If yes then that is not to be trusted. That button is really only good to quickly shrink the screen, many things break on that view. I'm 99.99% sure it works fine and is just the chrome dev tools.
You have two options: 1) In Chrome, shrink the window to mobile size manually, this is how I was taught to check mobile views. 2) Push your code to a github page. If you do, post the link here and we can open it up on mobile to check it. ( https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/)
Hi, I first noticed this bug on my Android Phone (Chrome) and realized the bug reproduced in the mobile view mode of Chrome Windows.
Can you post the link or code?
So, it's a bit complicated to show the original code in Javascript & protect the private data (I'm using F# code transpiled to Javascript code), I would love to recreate the code but it would require me a couple of hours.
But I found one of the official demo that has the same problems :
https://react-beautiful-dnd.netlify.app/iframe.html?id=board--simple
On mobile version with Android Chrome on my OnePlus 5T, if you try to drag'n'drop items between the last two lists, you have the exact same bug, where no animation happens.
In desktop, no problem.
The gif you took above, was that from your phone or your desktop?
The demo you linked works for me on desktop, and it works on my iphone. It does not work on desktop chrome if I click on "toggle device toolbar" and set it to view as a mobile device, which is to be expected.
The demos are coded with flex box, and if your demo is using grid, and if you are having problems using the demo on your phone, then I would then guess it's an issue with this repo displaying on mobile phones correctly. I only have a iphone so can't do any more mobile testing, but any chance you can open up your site with a different phone and check it?
Here is the code for the simple demo you linked: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/board.jsx https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/board/column.jsx
Thanks, I will try to check on other phones.
Also, even though the GIF I took above is actually from my Chrome Desktop in mobile mode, the bug behaved exactly the same as on my Chrome Mobile, on my phone, so for illustrative purpose I had included it like that.
Hi guys @OkayX6 @2stash, I'm facing the same issue on my mobile browser (Chrome). Did you guys ever find a solution or workaround for this? Thanks!
Hello,
I have a 2D grid layout, and inside each
cell (i,j)
is a Droppable > Draggable structure with sticky notes.Expected behavior
In mobile mode, drag animations should work in all Grid cells..
Actual behavior
Everything works fine in desktop, but the drag animations don't trigger in mobile, except in the first grid cells.
Steps to reproduce
See the video.
Suggested solution?
I have no idea, but display: grid seems to create problems.
What version of
React
are you using?React ^17.0.1
What version of
react-beautiful-dnd
are you running?13.1.0
What browser are you using?
Chrome.
Demo
See the gif:![rbd-mobile-bug](https://user-images.githubusercontent.com/1169339/115139376-c1debc00-a05b-11eb-95e8-50ab62b3e457.gif)