Hello everyone, I am building a desktop application using draggable groups but I had one small UX issue: When the user scrolls down, the draggable group doesn’t act like a floating group so it stays behind and the user needs to keep pulling it down while scrolling.
I thought about simply replacing the draggable group for a Floating one, but then I might cover some important parts of the screen like buttons or necessary information. (The group will show a video, like a floating wizard experience, so it’s big and would definitely sover important buttons.)
Can anyone help me by giving me some guidance on how to build one of these alternatives:
1 - Draggable group that keeps up while scrolling
2 - Floating group which can be dragged horizontally (In case it covers a button, the user would be able to drag it)
What about a floating group which you make transparent and takes up the top 50% of the screen and have the draggable group within that floating group?
With the floating group parameters you should be able to make sure its not in the way?
I thought it might work but once I tried it, the floating group doesn’t allow the users to click the buttons behind it. And if I place the floating group in the back, the element stops being draggable. So at the end, it didn’t work.
You can just use a draggable group, but apply some CSS to it to give it a ‘fixed’ position, so it stays in place when the page scrolls.
position: fixed !important;
Here’s an example: Floating Window (bubbleapps.io)
The window on the left has a relative position, whereas the one on the right has a fixed position.