Always visible Footer

Flow
1

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 ?
image.png

2

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

3

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

4

image.png
image.png

5

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

6

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

7

it worked but the footer is hiding the elements under it

8

I think I need something like this
image.png

9

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

10

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

11

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.

12

yeah I was able to achieve overlapping footer only

13

Are you using an AppLayout as the root layout?

14

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
HorizontalLayout

15

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
16

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)

17

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

18

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

setWidthFull();
setHeight("100dvh");```

`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.
19

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.

20

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