Forum Documentation Showcase Pricing Learn more

Any way to include a "sticky footer" which sticks to the bottom of user's screen when the page height is less than user's screen height?

#1

For example, I have a page whose height it dependent upon the number of things in a repeating group. When, there are no things in the group, the footer comes up fairly high on the screen and it’d look much better if it didn’t come up above the point where the bottom of the footer was at the bottom of the page.

Any way to do this in Bubble?

Screenshot (notice the black line at the bottom is the bottom menu bar on my computer):

#2

i would be looking into current page scrolling position maybe?

#3

Problem is I don’t know how tall the user’s screen is so I can’t really set a page scrolling position reliably.

And, I can’t use floating group because I don’t want the footer to be visible when the content is long enough to take up the full page.

#4

format the scrolling position as a percentage could work better.

#5

That’d work for many apps I’m sure. Good idea.

For our app, we’re looking for a solution with a bit more polish – don’t want it to look off for any of our users.

#6

you could always use js to find screen size if you get stuck and cant find something.

#7

yeah, I suspect I’m going to need a JS solution. Times like this, I wish I knew JS, lol.

#8

its an easy one :slight_smile: have a quick google there are a heap of methods, if you get stuck let me know i will help you out… maybe i should do up a screen size detect plugin…

4 Likes
#9

Thanks. I probably need custom JS for this given the UX goal, but I can imagine a plugin would be useful for positioning elements at times.

I don’t think element height is currently a value that can be dynamic though. If it were, being able to adapt to page height would be incredibly useful.

#10

Did you figure something out? I’m surprised there’s no solutions for a sticky footer… All apps or webapps have it for simple user interactions such as messages etc… : /

1 Like
#11

Take a look at the following…may help :slight_smile:

1 Like
#12

thanks! :slight_smile:

1 Like
#13

I’ve used the referenced threads, worked with floating groups and read the documentation. I’m still not able to figure this footer thing out. Mine keeps floating above the bottom of the page. Anyone else figure out a solid solution for this?

#14

The only thing I can think of is to make sure the bottom of the page in the editor is lined up exactly with the bottom of your floating group

#15

Every time I try to move the footer close to the bottom my page expands. So I always have the problem of the footer not beeing at the bottom. Are there any updates on this issue?

#16

It seems silly, but the way you do this is to put the floating group footer where you want it first, THEN you drag the bottom of the page all the way up to the bottom of the floating footer. It won’t let you make the page shorter than the last element, so that will make sure the floating group stays at the bottom of the user’s browser window.

In the editor, it will look like there’s another 30 or so pixels at the bottom, but there isn’t. Also, in preview mode, the page length will extend longer than the real page would as long as debug mode is on.

5 Likes
#17

This did the Trick! Thank you andrew :slight_smile:

2 Likes