Floating button that the user can move?

Need help Responsiveness
1

Hello !

I’m searching if there is a way to create a floating button that the user can move on a application if they want ? So that they can move it on any border of their screen?

Thanks a lot !

2

Hey @m.guerrier

Hmm :thinking: That’s an interesting idea. I think you could do this with 4 floating groups, one in each corner, then use the drag and drop plugin to do this. That is probably what I would try to do first. Does that make sense?

3

Here you go. Hope that helps. :blush:

Editor: testApp42wCleanDB | Bubble Editor

Preview: https://testapp42wcleandb.bubbleapps.io/version-test/4_corners_floating_group?debug_mode=true

4

Nice, @J805. :slightly_smiling_face:

Another option, @m.guerrier, is that you could probably do that with a bit of custom CSS as well. The user could choose from a set of predefined “docking” locations. Depending on the button and your desired UI, the “setting” could even be near the button itself. The button would simply “snap” to the selected location.

Anyway, if you wish to explore that option, feel free to message me with additional detail about your requirements.

2 Likes
5

I just challenged myself to make it better. Now I split the screen into 4 sections. Then the user doesn’t need to get close, they can just drop it anywhere and it will go to the nearest corner. Thanks @sudsy for the extra push. I always am trying to challenge myself to make things better in Bubble and do something outside of the box. :raised_hands:

2 Likes
6

But if it’s “outside the box”, you’d better file a bug report. D-n-D might not be working properly.

:crazy_face:

1 Like
7

something like that?

But the code needs to be adjusted to work properly for other browsers and devices
Tested env: Macbook , Chrome

1 Like
8

Thanks I’ll have a look but this looks like a good solution !

1 Like
9

Yes, that’s the idea, though the button can stay on the edge it doesn’t need to go the inside of the page

10

So going back and forth with Bubble on this for a while and it seems like the solution I offered won’t work since the dragging of the element is always off from where the mouse is. It sort of works but doesn’t look nice if you drag from anywhere but the top left corner. They aren’t going to fix the issue either. So I guess a code solution might be best or some other alternative. Sorry. :cry:

Response from Bubble:

Sorry to hear that the workaround was no sufficient. Because the previous setup is expected behavior based on the positioning and sizing conditionals you setup on the floating group to change the widths/heights/margins when dragged, this workaround would be the only method that would allow the icon to stay at a fixed location when the the Drag/Drop Group is dragged.