Always visible Footer

I’ve a form with lot of fields and the save button is at the bottom. Since, not all fields are mandatory, the user is reluctant to scroll to the bottom to find the save button and asking it show it as a overlapper on top of the existing fields like this. I tried Footer but that also takes me to the bottom. How to create like that ?

You mean something like this? CSS - How can I ensure the footer is always at the bottom of the page? - 30 seconds of code

Yes but it didn’t work. I’ve a VLas the parent. I attached the footer to the VL but no change


I tried something like this .footer { position: fixed; bottom: 0; width: 100%; }. This works in desktop but NOT in the mobile portrait view

You have to use two divs one for the top and one for the bottom

it worked but the footer is hiding the elements under it

I think I need something like this

Here there is some blank space so footer will not hide anything

To achieve this, I tried to create a dummy Div with flex grow= 1, but no change

I went down this rabbit hole as well and never managed to make it work for all cases. Taking into account responsiveness, it was very hard to get 100% right.

yeah I was able to achieve overlapping footer only

Are you using an AppLayout as the root layout?

Come to think of it, regardless of whether you are, this is how you generally do that easily with no CSS:

VerticalLayout (with setSizeFull)
Scroller (with setSizeFull)
VerticalLayout (with null height)
the content, i.e. form or whatever

the important parts are:

  • the root VL has 100% height
  • you use a Scroller for the part that should scroll
  • the Scroller has 100% height
  • the content inside the scroller does not have 100% height

That being said, the variable viewport height in mobile browsers can mess with that depending on what your UI root is like (with the addressbar disappearing/reappearing etc)

If you use the CSS approach with position:fixed on the footer, you will indeed have to allocate some space below the content to avoid the footer from overlapping it

In that case, you should probably not setSizeFull on the root layout, but instead do


`dvh` is a new css unit that corresponds to the actual dynamic height of the viewport. You need to be on iOS 15.4 or newer, or the latest Android Chrome/FF for it to work.

If you are using AppLayout as the UI root layout, you should set that 100dvh height on that AppLayout, and 100% height on whatever is inside it that contains the footer and the content scroller.

In AppLayout I do not see any setter for setting height so I set using getElement().setAttribute("height", "100dvh");