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):
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.
format the scrolling position as a percentage could work better.
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.
you could always use js to find screen size if you get stuck and cant find something.
yeah, I suspect I’m going to need a JS solution. Times like this, I wish I knew JS, lol.
its an easy one 
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…
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.
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… : /
Take a look at the following…may help 
thanks!
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?
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
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?
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.
This did the Trick! Thank you andrew
I am hoping you might have some tips on this topic. I’ve been scouring the forum for a couple of hours and can’t find anything that points to a solution, but this post seems to imply you have a good idea of how to accomplish what I am trying to.
Its basically a repeating group with a fixed number of cells for pagination purposes that is responsive and therefore expands and contracts with page width, so the pagination group and footer of the page don’t have consistent spacing with the repeating group as page expands and contracts.
Any input would be much appreciated.
I’m not quite sure I understand you’re challenge exactly. That said, here’s some info that may help…
There are multiple plugins that enable you to move elements to specific places on the page, such as moveit. There might be a solution there.
Additionally, I’ve hired people to write JS in the past to change the page height or move elements on the page to help bend Bubble to my will. Anyone with JS skills should be able to do the same.
@sridharan.s thanks for the ideas. I actually got helped out by @duke.severn on this subject.
The key was to have a group that contains a repeating group, and other elements as seen in the element tree below.
The “main group” ( in my example : Group Favorite Gifts ) has the following setting to make sure it can be expanded.
I set mine to max width 800% so that the repeating group would expand to many different columns when the page is stretched.
Then the repeating group inside must be set up to have an ext vertical scroll and have selected allow more than one column when stretched.
This enables you to work with just one cell as your repeating group on the editor page.
The other necessary detail is in the responsive editor to have collapse margins when width is a certain amount as seen below
Your repeating group has a similar set up, although it doesn’t apply a max width:
Other elements inside the repeating group should be set to fixed width so when page is stretched the cells remain the same…I suppose people could choose to set a max width to allow some expansion. All the numbers could be played around with to change how many columns are shown, or where on the page the elements are set etc.
In regards to the sticky footer, having a regular group at the bottom of the page is fine. The benefits of this allow the page in editor to be relatively short and on page load the elements inside the repeating groups will push the page down and keeping the group on the bottom of the page.
I have posted this editor for people to see a basic version ( make sure to scroll to bottom of index page )
I know this makes my development process a lot quicker and easier for any page requiring responsive repeating groups.
I was also able to implement a pagination onto this method as well.
Basically create pagination as normally would. Set the data source of repeating group to show numbers from:until:
Then just use some basic arithmetic and custom states to set up the equation needed to set the From Until items…in my example my custom states are on my page called search results and the custom state is labeled Pagination Items Until as well as Pagination Items From
There are quite a few more custom states required for the equation but basically need to decide on a number of results per page ( this is a place you could use a selector for the user to choose what number of results per page to display; this is because you need this number as a custom state to do the math, so it could be selected on page ).
Once you have number of results ( say 30 )
Assume first page is 1-30 ; page two is 31-60 etc…
the math to figure the results from number is
[(page number - 1) * results per page) + 1
Your number for results until is the same as number of results per page ( this is because how the function built in bubble does the range: the results from is the beginning number and the results until should be the total number added to get to final — originally I set it thinking to be the last number of the range so 60 or 90 or 120; but it needs to remain a constant equal to your results per page.)
Set a custom state for each portion of the equation as needed to complete it…point your data source of repeating group to the above and it will allow you to set up your pagination functions.
I finally have a fully responsive repeating group with pagination set dynamically by user to display the desired number of results per page…Also can set up different displays in the repeating group if want an ad in the mix.
