Popup (or Group?) fixed to bottom of screen

Need help
1

Hi all,

I’m trying to replicate the following design and behaviour with a popup (fixed to bottom of screen, full width):

IMG_1679
IMG_16791179×2556 149 KB

I can get the transition to work, and the width (using a condition with 'Current page width <= bla), but I’m not sure how I can get it to stick to the bottom?

I was hoping to avoid using a Floating Group, as on desktop I want this popup to be a typical popup style i.e. a box in the middle of the screen.

Would I need to use custom CSS for this, or is there a way in bubble.

Appreciate any advice :slight_smile:

2

Just create the popup and floating group individually to save yourself a lot of trouble.

You can create a Reusable Element for the actual content to be used in the popup and floating group.

3

I started trying some CSS to align a popup to the bottom but it’s not cooperating…

4

Hi thanks for responding, I’m a little confused by your response as I was saying I don’t want to create a floating group.

I’m confused why I’d need a pop up and a floating group?

5

So it looked like putting this in an HTML element (from the Toolbox plugin) worked:

<style>
div#popup {
    position: fixed !important;
    top: calc(100vh - 300px) !important;
}
</style>

Change the element ID from “popup” to something else if you need to. Then change the 300px to whatever the fixed height of your popup is.

It’s basically setting the fixed position to 100% of the browser’s viewport height minus the popups height itself.

Then you need to expose Element IDs in the app settings, General tab.
Then add the id “popup” to the popup.

The popups corners should probably be not rounded at least on the bottom.

1 Like
6

Thanks Tyler !

Before I implement, I had a thought (I’m new so still figuring this out)… Is there any particular ‘benefit’ to using a popup over say a Group, which I choose not to display on page load. I’d attach to a button and have a workflow with ‘Element Actions > Animate’ and point to the Group I intend to display?

I could also then add a group in the background (but on top of my UI) that covers the screen with transparency so that it darkens everything behind my popup group?

Or am I missing something…?

7

Well a regular group can’t float over everything. So usually we use a Popup or Floating Group to show something like you’re trying to do.

A regular group you place in a specific spot so it doesn’t sound like that’s what you want.

The popup or floating group you can still use the animate action so it can move onto screen.

1 Like
8

Makes sense!

I’ve got it working now using your code, but I think the issue is going to be with varying phone sizes, and varying popup sizes (some will have 1 action, others up to 5/6), it could become very finicky as the ‘top’ css code needs to be pretty accurate…

:frowning:

9

Well the “top” is calculated as the viewport - the popup’s fixed height. So as the device height changes it takes that into account. Unless do you mean something else?

10

Sorry what I’m saying is that the pop-up won’t be fixed height, as it will depend on the number of actions…

Also, I’ve just realised this might not work due to how browsers work on mobile…

In the example below, you can see the web page actually loads behind part of the browser ui (in the green box i’ve drawn)

image
image1179×2556 219 KB

image
image1179×2556 163 KB

I might have to look at a floating group somehow - I can see in this forum bubble manages to have a group pinned to the very bottom, which stays relative to the ui as it grows and shrinks

image
image1178×816 111 KB

image
image1178×553 52.7 KB

11

A popup for desktop users, a floating group for mobile users. Just set a conditional that will make each one visible if the page width is more or less than 500px (i chose 500px for no particular reason).

I’ve fiddled alot with applying CSS to almost every Bubble native element and nothing is as frustrating as a Bubble popup element. I often get different results between mobile and desktop.

If you insist on the CSS route you can take @tylerboodman’s code and replace the 300px with a dynamic expression. In this case it will be something like

"popup element's height"px

2 Likes
12

This topic was automatically closed after 70 days. New replies are no longer allowed.