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?

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

1 Like

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

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

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… : /

2 Likes

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

1 Like

thanks! :slight_smile:

1 Like

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.

8 Likes

This did the Trick! Thank you andrew :slight_smile:

2 Likes

@sridharan.s

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.

38%20PM

The “main group” ( in my example : Group Favorite Gifts ) has the following setting to make sure it can be expanded.

13%20PM

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.

48%20PM

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

52%20PM

Your repeating group has a similar set up, although it doesn’t apply a max width:

51%20PM

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:

28%20PM

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

44%20PM

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.

4 Likes

Hi @boston85719,

I tried to do the same method for pagination. I have 11 items and each page contains 5 items. So I have 3 pages. On the first page and last page it is working. But on the second page 1 item too many is shown. This item is also shown (correctly) on the last page. Can you see what I am missing? Please look at the screenshots below. At the bottom the value of the used custom stated are printed.

Page 1

Page 2


Company 9 (11th in the list) is shown, which shouldn’t be. Start item is 6 and end item is 10. This implies 5 items, but 6 items are shown.

Config of Repeating group

** Page start/end calculation**
The start and end item number of each page are calculated using a custom event.


Thank for the help.

Solved it. I misinterpreted “items until #” expression. It just counts the number of items from the defined start. So when I changed “items until #RE-CompanyList’s current_page size” it works like a charm:

2 Likes

@sridharan.s I suppose this is probably way too late, but just in case you still don’t have a good fix, here’s a great method @Taiheta helped me with:

1 Like

how is this a “great method”? it’s convoluted AF… there has to be a better way to do this… we’re simply talking about fixing an element to the bottom here… c’mon!

1 Like

@jd.cardona30 It’s hardly just “fixing an element to the bottom” - if it were, a simple floating group would do the trick.

A sticky footer, however, needs to work with dynamic page lengths, allowing for being moved down the page when long content pushes it down, while still staying at the bottom when there’s no page content or it’s very short.

Until Bubble gives us a better out-of-the-box option, that’s the best way I’ve seen so far to make it work.