How to fix container at the bottom?

Ask for Help
1

Hello

I have created a customer portal where our customers can download our test results as a PDF. So far, we have printed out all test reports and sent them in an envelope by post.

Since the portal is not only shared internally in our company, but also with external users, I would like to create a footer and fix it at the bottom of the page (desktop view). I have created a container with the corresponding text and the link to the privacy policy and legal notice.

Unfortunately, I cannot fix the container at the end of the screen. My question is therefore: how can I solve this problem?

Thanks,
Patrick

Customer-portal_BIOREBA
Customer-portal_BIOREBA1514Ă—855 82.6 KB

2

I think if you add a couple spacers that should do it.

3

Thanks Eric, but then I have white padding at the bottom (which I don’t want). It almost works, but it’s not the ideal solution.

4

Ok. Just to be clear… I meant put the spacers above the container which should force the container to the bottom… or you could put them in the container if you prefer

5

Yes. I put the spacers above the container (footer).

Customer-portal_V2
Customer-portal_V21524Ă—715 62.5 KB

1 Like
6

That’s what I had in mind… but as the page fills up maybe you want the bottom container to be “sticky”?

If you have a paid plan you could try this css. Put the css under settings → appearance and give the bottom container the class name stickybottom under options. Always keep that container as the last component on your screen for the css to work properly.


.stickybottom {
position: -webkit-sticky;
position: sticky;
bottom: 0px;
z-index: 999;
margin-top: auto;
}

You can find this and a bunch of other helpful codes here

2 Likes
7

Thank you for your help! I am currently still a free user, is the customization of CSS also possible there or only from the price model “Maker”?

I’m really surprised that Glide doesn’t already include such a basic feature (footer). Is there no other option than CSS (and using the paid version)?

1 Like
8

My pleasure! CSS is only available on paid plans. From the screenshot it looks like you got what you wanted by just adding a few spacers above the container.

Is the issue that you want it to be “sticky” or is it something else?

9

Try adjusting the spacer some distance, or try increasing the height a little it might help. As far as I know, it works.

1 Like
10

Ahhh yes I see the tiny space now. Just add one more spacer and you should be good to go :+1:

11

If I add another spacer (or change the size), I have to scroll the page (which I don’t want to do). The footer should always be in the same place, no matter what the screen resolution is. But I guess I’m starting to realize that without CSS I’m not going to get the result I want… :frowning:

12

Yeah, this container is not designed to stick in the bottom position, but it can still roll.
I see you don’t use complicated components, maybe you can try making your own with a richtext component with HTML and CSS-inline.