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.
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:
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!
@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.
Thank you for your help & documenting this topic.
However I agree with jd.cardona : this should be an out-of-the box feature, not a 11 steps configuration relying on a third-party plugin… It is such a common need.
5 years since the start of this thread, and people are still struggling with this.
Hopefully it will get prioritized soon.
However I agree with jd.cardona : this should be an out-of-the box feature, not a 11 steps configuration relying on a third-party plugin…
Not sure if you missed it, but this has been an out-of-the-box feature ever since the new responsive engine got released last year and made all of our lives so much easier.
Do I need to “Upgrade to the new Responsive Engine [beta]” to see this feature ?
Correct. One thing to keep in mind, though: if you are thinking of doing it in a live app and converting existing pages to the new engine, make sure you read the docs and the forum threads beforehand, since you won’t be able to go back to the old engine on that page should you change your mind. Also, your existing layout may not convert properly because the old engine was a mess of absolute positioning held together by a duct tape and a prayer - the new one is mostly nice and clean Flexbox.
Hi, sorry to come back on this, but I can’t figure out how to have a sticky footer with the new responsive engine. I’ve looked at how to do it with flexbox, but I can’t find the same properties to modify in Bubble.
My footer is in a “full body” Group that has a height of 100% (should correspond to the 100vh that they advise to do in CSS).
But then I don’t see an option or which parameter to modify, in order to make the footer sticky.
For instance I can change the “full body” Group container alignment to “space between”, which does put the footer sticky at bottom, but the issue is that it breaks the whole design of the page, as I need other elements to be displayed one after the other from the top of the page (and here, there is some space in between them, for instance below the header).
Found a way to do it, in case it can help anyone :
create a big div which contains everything, at the same level as you page
– configure its “Container layout” field as “Align to parent”
– and give it a min height of 100%
create 2 divs inside this container div :
– one for all your content but the footer, and configure it to align to top
– one for the footer, and configure it to align to bottom
NB: you also have to remove the “?debug_mode=true” in the URL to actually see that it works.
I’m having a problem with this as well. Every page I’ve ever built on Bubble seems to have similar issues. Below the footer there is a gap between it and the bottom of the page (?debug_mode=true is not in the URL).
I’ve tried the suggestions on this page:
Creating the page as ‘align to parent’, making the min heights 0 and pinning the footer at the bottom of the page and other content to the top. Issues here: a) not aligned to bottom of the page and b) it actually overlaps the ‘Group center layout’ above the footer group.
Make the page a column, aligning the main content to the top and and footer to the bottom. Setting min height to 0 for the main content and choosing ‘fit height to content’. This means there is no overlap between the footer and main content but there is still a gap below the footer.
I have also a lot of issues with the footer. My main issue is that when loading a page, the footer is (for whatever reason) the first thing that loads before the content is loading. This means that for a second or so, the footer is in the middle of the page until it is pushed down by the dynamic content in my repeating groups.
On my pages the footer is always the last item in a normal group, setup as a column. I tried almost any workaround. I added a visibility condition which fires “when (entire) page has loaded”, I set the visibility of the footer based on the scrolling position which does not make sense, because it is not the scrolling position but the page height, which would determine it. Nothing worked. The footer blinks on every page on the middle of the page for a second. This is especially a problem if you have a eye-catching color on your footer…
Place your header and your page’s content inside a group that fills 100% width so you don’t even notice it’s in a group
Place your footer outside of this group
Align the page as a “space between” container alignment
This keeps the footer at the bottom no matter how big or small of a page and the relevant page content in a normal spacing from the header. The amount of white space between the end of your page’s content and the footer will then be dynamic.
