[NEW PLUGIN] Bottom Sheet

How come the bottom sheet element can’t be placed inside a popup? I have a “Backend” popup that contains various sources, variables, etc. that I dont’t want displayed. However, when I put the bottom sheet inside a popup it doesn’t work anymore

Hi @minimumstudio

I’m looking for a solution to allow a user to drag a group from bottom to top to expand it or, conversely, from top to bottom to reduce it (see screenshot below).

So far, I haven’t found a good solution.

Your plugin may be just the solution I need, as it has the advantage of animating the change to the group height.

Can it help me achieve my goal?

So far, here’s what I’ve done:

I’ve installed the plugin.

I’ve placed the “bottom sheet” element on my page. This element is visible on page load

I’ve set up the association between the group (which is visible on page load) and the “bottom sheet” element using the group’s HTML ID.

I’ve created three workflows:

  1. When page is loaded. Step 1 : Open BottomSheet A.
  2. When group launch bottom sheet (the gray band and the text “My Group” you can see on the previous screenshot) is clicked. Step 1 : Open BottomSheet A.
  3. When BottomSheet A was dismissed. Step 1 : Close BottomSheet A.

But when I load my page or click on “My Group”, nothing happens.

What am I missing?

Hi @Yas-B !
First of all, thanks for using the plugin!

It’s always a bit tricky trying to debug via messages, so if you’re comfortable with it, you could share the link to the editor (view only) with us via DMs!

I think you don’t want the bottom sheet to open on page load but when the group is clicked. So, you can hide everything on page load and when the group is clicked → show {group that needs to be in the bottom sheet} → open bottom sheet. Check out the demo and the editor to see how we use it!

The dragging should be possible without any further adjustments but if you want to show more data when the group is taller, you could use the example from the demo as well!

Let me know if this helps :slight_smile:

Thanks @minimumstudio for this quick reply.

I can’t hide everything. I need the group to expand/collapse to be visible as soon as the page loads.

I thought that opening the bottom sheet when the page loads would make it immediately draggable for the user.

To show more data inside the group, I allowed vertical scrolling when content overflows.

I’ll send you the link to the editor immediately via DMs.

Thanks for your help!

Hi! Does the bottom sheet element need to be visible in order to display the bottom sheet? It seems like this is the case, as “Open” doesn’t work unless that element is visible. The downside to this is that the element is a 24px by 24px block, which makes a big impact on smaller reusable elements. Is there any way around this?

1 Like

Hi Cody!
Unfortunately there is no way around this. What’s best is to make your group/reusable an “align-to-parent” container and put the bottom sheet element in the back of the group. Then, just stack a group on top of that to hide the bottom sheet element! Let me know if you have any questions :slight_smile: Happy to help!

1 Like

Thanks for your help! This did the trick - my first use of align-to-parent, and :champagne:

1 Like

Good to hear @codywatson ! We would appreciate it so much if you could leave a good review on the plugin!

Hi there, I am using the plugin and really like it. I have an issue on mobile, where the bottom sheet is too tall as it goes behind two floating header groups that I have.

I tried setting a top margin on my group that the bottom sheet refernces, but that creates a margin inside the bottom sheet rather than around it

As I don’t know my users screen size, rather than setting a max height limitation I would rather setup a top margin?

1 Like

Hey! Thanks for reaching out and using our plugin!

This is a tough one since the bottom sheet and your navigation are both floating groups. Meaning that margins won’t work… Best thing you could do it set a conditional on the bottom sheet (or the group that you want to render in it) to have a max height when ‘This page’s height < X’ This make sure that you will have a smaller bottom sheet for smaller screens. You probably need to hide something in the bottom sheet or make the group scrollable when content overflows.

Let me know if that works!

1 Like

The problem ist, there is not option for this page's height at least I can’t find it.
Why would margins not work?
I know the width of my top navigation bar (60px) and I know when it’s shown (mobile only). so if I was able to set a top margin on the bottom sheet I could simply set that to > 60px and the bottom sheet would not go below the top navigation. My bottom sheet is already scrollable

It is because the library we used for this plugin is not built in that way, maybe we can add a feature for it but I do have to check with our dev for that!
You can get the page height by going to the conditionals and searching for your page’s name and selecting its height. So if your page name is Index, you go to the conditionals tab and select ‘Index’s height’.

Let me know if that helps and I’ll get back to you on the margin question!

Hey @konrad1 ! This should be fixed in the new update of the plugin! You can set margins now.

1 Like

Awesome thanks!

1 Like

@minimumstudio slidable isn’t working in your demo on Android or iOS.

Hey Ralph!
Thanks for letting us know! We’ll check it out immediately!

1 Like

Hey Konrad, how did you get the repeating group scrolling to work inside the bottom sheet? It works on desktop but can’t get it to work on mobile

I’m having an issue with the latest version of the plugin.

If I switch from 1.1.5 to 1.1.10

My bottom sheet is not opening anymore (no changes to workflows etc)

Is there a breaking change involved.

also what’s up with all these fallback releases ^^

1 Like

Nothing special. just the standard, max_height, allow scrolling settings

Hey mate!
We’re experiencing some bugs with deploying new versions of the plugin. Even when we revert back to previous versions, the plugin will break. We submitted a bug report to Bubble. Best thing you could do is to revert back to the original version 1.1.5.

Hope this helps!