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