[New Plugin] – Drag Bar for Floating Groups

Showcase Plugins
1

Hello Bubblers,

This plugin allows you to add a drag bar to your floating group.

Kind of like on Notion or Monday.com where you can use a similar drag bar on an open task.

Quick preview:
https://www.loom.com/embed/23b4c2df809146fcaffbd18440d1371a

Current features & customizations:
:white_check_mark: Change drag bar width, initial color, on hover color, on drag color
:white_check_mark: Respects min and max width of floating group while dragging
:white_check_mark: Set an initial width for your floating group on page load
:white_check_mark: Drag bar works on mobile
:white_check_mark: Dragging vertically works
:white_check_mark: Drag End event
:white_check_mark: Action to set height / width dynamically (including transition animation)
:white_check_mark: Drag Bar border like e.g. here on a reply in the forum (see screenshot below)

drag_bar_border
drag_bar_border1566×260 23 KB

Here are the links:
:confetti_ball: Preview: Resizeable Floating Group Drag Bar
:writing_hand: Editor: Resizeable Floating Group Drag Bar
:ballot_box_with_check: Plugin page: Resizeable Floating Group Drag Bar Plugin | Bubble

Feel free to reach out for any feedback, bugs or additional features!

9 Likes
2

Hi @jukoen :wave:
I tested your demo in mobile
it’s not working (Is it just for web app)

THANKS FOR THE PLUGIN :+1:

1 Like
3

Hi @viquarahmed07, thanks for your feedback!

I originally built this to work on desktop browsers but will add this to work on mobile/touch devices as well.

Would you be interested in that?

1 Like
4

@jukoen Yes i am interested :+1:

5

Hey @viquarahmed07, I updated it. :wink:
:white_check_mark: Drag bar works on mobile

3 Likes
6

@jukoen Thanks :+1:
I will let you know if i find any issues

7

Looks great! Does it work vertically too? It would be nice if there are ranges where it can snap.

8

Hi @MarkusBoostedApp, good point, thanks! I will make it work vertically too.

Your ranges idea also sounds interesting, do you have an example?

9

Try to use Google Maps on your phone and see how it snaps to different locations.

image
image1242×2208 491 KB

10

@MarkusBoostedApp I now added a few features with which you can make a Floating Group snap to different ranges on mobile & desktop, while keeping it customizable:
:white_check_mark: Dragging vertically works
:white_check_mark: Drag End event
:white_check_mark: Action to set height / width dynamically (including transition animation)

Extra:
:white_check_mark: Drag Bar border like e.g. here on a reply in the forum.

drag_bar_border
drag_bar_border1566×260 23 KB

See the preview again here:
Resizeable Floating Group Drag Bar

1 Like
11

Looks really good!

I tried on an iphone but an animation wasn’t very smooth. I think the issue related to safari’s toolbar.

12

Hi!

Really want to like this but on mobile, the drag activates regardless of where i tap on the element instead of just activating when dragging the edge of the element.

Is this an intended feature? Can i limit resizing to only when i staff from the edge of the element?

13

Preliminary update:
@MarkusBoostedApp feel free to take another look, fixed the issue that you were experiencing on iPhone. :+1:

@ihsanzainal84 Great to hear you want to like it so hope this changes :slight_smile: I have now limited this so only touching the dragbar triggers the dragging behavior.

Feel free to take another look at the preview for the Floating group at the bottom & let me know if this works for both of you.

1 Like
14

Nice! It looks to work! Will be using this in my next project!

1 Like
15

Hello! This plugin only works when the floating group is visible. If the floating group appears when the button is clicked, then I can’t do anything with it.

Can I somehow make it work?

16

Hi @bubbledeveloper, yes you can make this work.

  1. Uncheck the “visible on page load” property of the “Resizer” Plugin Element
  2. Add a workflow with “When Floating Group is visible” - set to “once” - & inside this workflow add an action to show the “Resizer” plugin element

Here is a working demo.

Here are also screenshots of the same:

Bildschirm­foto 2022-12-11 um 21.27.59
Bildschirm­foto 2022-12-11 um 21.27.59728×1126 61.9 KB
Bildschirm­foto 2022-12-11 um 21.27.31
Bildschirm­foto 2022-12-11 um 21.27.31728×1126 60.5 KB

Let me know how this works for you.

1 Like
17

Thanks for the answer! It works. But in this case, the condition for closing the floating group does not work. Is it possible to make it close when dragged down?

18

@bubbledeveloper Yes with a bit of Bubble logic you can make it close & also reopen (adjusted demo here):

Here’s a quick loom to show this:

1 Like
19

I see! Thanks a lot!

20

In the web version, everything works fine, but in safari on an iPhone, after closing by swipe, it does not open when the button is pressed. Maybe someone knows why this is happening?