How do I always align a Container to Bottom of Page/

[patopt]

I’m trying to achieve this look in my UI, where the ability to submit a form is always locked to the bottom of a Modal. If the form is large you scroll through it, but you can always see the submit button. I want it to look like this:

But I’m struggling to get this working. I’ve tried sticky for the bottom column, but trying to stretch it to the bottom of the page at 100VH is just knocking it out of sight.

Any ideas?

[aurelie]

Hi,
this is happening at the parent level :).

Create the following structure inside your modal

Container (with a fix or a max-height, and a column flow)

• Header container
• Body container
• Footer container

Then select the Body container, and ask it to take all the available place.

[patopt]

I can get it working that way, the problem is that I want form validation to work which means that I need to have the containers within the Form Container. Here is a look at what the structure looks like to make this work.