Footer in new responsive

Need help New Responsive Engine
1

Hi,

please, how to create footer in new responsive engine if pages are in column layout?

I just cant push element to bottom of the page…

Thank you.

Best,
Michal

1 Like
2

Use the FloatingGroup element, and you can position it at the bottom fixed.

3

Floating group could be fixed to bottom of a screen but not at the bottom of the page.

Or how to do it?

Thanks,
Michal

2 Likes
4

Put a screenshot or an image on what you are trying to achieve.

5

Your footer should be as reusable element.

  1. Make it!
  2. Add to the page
  3. Make it last on the page
6

Thank you for the tips but how achieve “make it last on the page”?

Here is my page:

image
image463×798 28.3 KB

And here is the setting of reusable footer:

image
image361×630 20.6 KB

1 Like
7

Same issue here

8

Make sure the ‘stuff on the page’ doesn’t have a fixed height, nor is set to fit height to content - leave its max height as infinite so it fills the full height of the page.

1 Like
9

check the editor

1 Like
10

Hi Michal,

Please kindly check the minimum height in the layout settings of your page. It should be 0 or some other small number

11

You just need to play around with the way you have things grouped on the page.

  1. Change the page type to Align to Parent
  2. Put everything other than the Footer in a group and call it something like Page Container and set the type to column.
  3. Set the alignment of Page Container to the top of the page
  4. Set the alignment the footer to the bottom of the page

Now the footer will be stuck to the bottom of the page in the case that the page container isn’t tall enough to push the footer to the bottom of the page, but in the instance that the page container height is like 3000px or something then you won’t have a sticky footer, it’ll still be underneath the page container when you scroll down

Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

I post daily about no-code and Bubble on Twitter Follow Support Dept on Twitter

4 Likes
12

Isn’t there a risk of footer overlapping body column doing that? I don’t know how to prevent overlap for Align to Parent

13

In my app, when saving for “production”, I set the “min height” in the layout properties of the page to 0

image

14

Hi guys,

thank you for advices.

I finally solved it with min height 0 (what was fine advice) and empty group over footer with infinite height. So, if i change size of page, the empty group pushing footer at the end of the page in every situations.
You can check it here: https://backuptor.com/
Best,
Michal

1 Like