Quite often, I want to control the height of elements relative to a user’s screen. This is important enough for me that I’ve coded JS to make it work for me, but this is both time consuming, against the philosophy of Bubble, and perhaps likely to break if / when Bubble changes their front-end code.
Some specific use cases that I’d really like to see supported:
- Make group full page height
- Display floating group as sticky footer
- Display floating group as left nav, have it start 10px below header and end 10px above bottom of screen.
- Show “contact us” icon / button in the bottom right corner.
Anyone else run into this challenge, or is it just me?
6 Likes
So we don’t support everything, but we do support some stuff here. Have you used floating groups? You can make them floating relatively to the bottom of the screen, by having them in edit mode at the bottom of the page area.
I’ve used floating groups, but haven’t found a way to use the floating relative to the bottom of the screen effectively since (my understand is) they start out at the height of the y position and then stay fixed relative to the bottom of the screen. So, without knowing the original viewport height, I can’t set the y position to be an appropriate height for the multitude of viewport sizes.
Perhaps I’m missing something?
They’re designed to keep the difference between the bottom of the page and the bottom of the group constant, so that should do it? Do you have a test page?
Yeah, I’ve tried that. That part works but doesn’t address any of my use cases – if I can’t set the original height relative to the bottom of the page then keeping it fixed doesn’t help me. In other words, if I want to put a group that stays 5px from the bottom of the screen, I still can’t do that because I don’t know what y position to put in to start the group 5px from the bottom of the screen. Am I missing something?
Here’s one:
editor: removed
output: removed
I’m trying to understand it’s behavior. What you put there seemed to work. When I changed the page height then it stopped working. I can’t figure out why yours worked or why me changing the page height broke it. What #'s or settings did you change?
What is kept constant if you make the element float relatively to the bottom is distance between the bottom of the element and the bottom of the page.
I didn’t change anything, just moved the element. If you move the element down it’ll show up again. Right now the distance is higher than the screen height, so you won’t see anything.
So how would I set it, say, 10px from the bottom of every user’s screen?
What does “Every user’s screen” mean? You have one screen, one page. So make the element 10px above the bottom of the page.
I believe @sridharan.s is talking about the users’ “viewport.” My page might be 1200 pixels tall, but the user’s viewport may only be 800 px tall. Scott is asking (I think) about being able to detect the user’s viewport size and adjust his design according to that.
I finally get it!
Okay, so what’s going on is that it calculates the height between the bottom of the floating group and the bottom of the page. Then, it displays the floating group that distance above the bottom of the user’s screen.
4 Likes
As a point of feedback, a few of my friends have started using Bubble and none of us understood how to get floating groups to work relative to the bottom. Turns out, it’s incredibly simple. It just wasn’t obvious to us that this is the way to do it.
I can imagine other Bubblers would benefit from an explanation that explains this, with an emphasis on the items I had put in bold since that seems to be the common point of confusion.
Thanks for the demo @emmanuel . This info will be useful.
I also think it’s be useful to have a type of group (perhaps named “stretch group”) that has the top of the group fixed relative to the top of the page and the bottom of the group fixed relative to the bottom of the page.
This way, people could create full height pages. They could create full height menu’s that are constantly displayed (and don’t overlap the header or footer), etc.
Just a thought.
How would you rephrase this?
Vertically floating relatively to
You have to pick the base to calculate the position of the floating group. If you pick top (default), Bubble will keep the distance between the top edge of the group and the top of the page constant, no matter what the scrolling position of the page is. If you pick bottom, the distance in edit mode between the bottom edge and the bottom of the page will be kept constant. If you pick both, both the top and bottom distance will be constant, and a scrollbar will appear if the group is too short to show all of its contents. Keep this in mind as you design your page. If you put the group high on the page and make it floating relatively to the bottom, the element might very well be ‘above’ the top of the screen, and not show up.
See below for my take. It’s particulary important, in my opinion, to highlight the word choices in bold below. You can bold them or perhaps underline them if bold is too much. I don’t know that italics would be noticable enough for many users.
Vertically floating relatively to
First, select whether to float the group relative to the top, bottom, or both. If you select top (default), Bubble will keep the distance between the top edge of the group and the top of the user’s screen constant, no matter what the scrolling position of the page is. If you select bottom, Bubble will keep the distance between the bottom of the group and the user’s screen constant no matter what the scrolling position of the page is. The distance is calculated as the height between the bottom edge of the floating group and the bottom of the Bubble page. Then, it displays the floating group that distance above the bottom of the user’s screen. If you select both, both the top and bottom distance will be constant, and a scrollbar will appear if the group is too short to show all of its contents. Keep this in mind as you design your page. If you put the group high on the page and make it floating relatively to the bottom, the element might very well be ‘above’ the top of the screen, and not show up.
Thanks, will adjust.
Bold is not something we do yet in the reference, but we’ll look into design options.
