How to place a custom footer below the screen in Screen Flow?

Question

In my Screen Flow, I need buttons that are not available in the Flow Builder, so I developed a custom lwc component - a footer with the buttons that I need. I placed this custom footer under a data table on the screen.

The issue I'm facing is that the data table has many rows and doesn't fit entirely on the screen, making the screen scrollable. As a result, users have to scroll down to reach the footer to click the buttons.

I want to place this custom footer in the same fixed position where the standard footer typically appears, so that it remains visible at the bottom of the screen regardless of scrolling. Additionally, I have a few screens of different sizes, so the footer should stick to the bottom of any screen.

I would greatly appreciate any help! Below are screenshots of my screen flow, the footer component, and my attempt to resolve it with CSS.

Thank you in advance!

• This is what I have now. A user needs to scroll to see footer.

• This is how it should look like. Footer is always visible.

- This is html of my component.

<template>
    <div class="footer-container slds-clearfix">
        <template for:each={buttons} for:item="button">
            <lightning-button
                key={button.label}
                label={button.label}
                onclick={handleClick}
                variant={button.variant}
                class={button.class}
                >
            </lightning-button>
        </template>
    </div>
</template>

• This is the CSS with which I tried to resovle the issue:

.footer-container { position: fixed; bottom: 2.54rem; z-index: 1000; width: 100%; left: 0; }

It works well for the screen with big data table (see the second screenshot above). But does not work for smaller screens:

So I am looking for a solution that would work for any flow screen sizes.

Answer 1

I found a workaround. Post for those who encountered the same issue. I added this CSS to my custom footer component:

position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;

It makes the footer to be always in the bottom of the flow screen. However, the footer may cover over a part of a data table. So, in Flow Builder I added the Display Text element with a couple of blank lines. It creates a gap between the footer and data table.