Page sticky footer actions only sticky at certain window sizes/distance from action buttons

[Mrkbingham]

Package

filament/filament

Package Version

v3.2.133

Laravel Version

v10.48.25

Livewire Version

v3.5.12

PHP Version

PHP 8.3.15

Problem description

When setting the $formActionsAreSticky property on pages, the footer is not positioned correctly due to the JS calculating whether or not the actions should be sticky/stuck.

I'm uncertain as to why this reversion was committed, however, using the old code here resolves my issue:
e99ed71

I believe this is the current problem:

The calculation of the action button's stickiness is based on the vertical scroll position window.scrollY and the height of the overall window. However, the commit noted above takes into account the position of the element itself, determining stickiness based on the element's distance from it's original position.

If there is a thread that I was unable to find related to the reversion of the commit linked above, I'd be happy to help open a new PR to address the issue.

Also, FWIW, the code is currently the same between v3 and v4 branches.

Mobile and desktop examples

Screen.Recording.2025-01-14.at.6.08.22.PM.mov

Screen.Recording.2025-01-14.at.6.09.02.PM.mov

Expected behavior

That the form action buttons would be sticky at the bottom of the screen until the page was scrolled to the position where the action buttons exist in a non-sticky position within the HTML of the page.

Mobile and desktop examples (Expected behavior):

Using this version of the actions.blade.php file: https://github.com/filamentphp/filament/blob/56450d423089609b3fb0125f45c504622451403c/packages/panels/resources/views/components/form/actions.blade.php

Screen.Recording.2025-01-15.at.9.36.20.AM.mov

Screen.Recording.2025-01-15.at.9.37.02.AM.mov

Steps to reproduce

1. Add \Filament\Pages\Page::stickyFormActions(true); to your EventServiceProvider's boot method
2. Create a form that is tall enough to push the default save/cancel action buttons off the form
3. Load the page, and you will see the action buttons are sticky on a small screen, but as you scroll, once you get near to the action buttons, they are no longer sticky.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/Mrkbingham/filament-sticky-footer-issue

Relevant log output

No response

[tuimz]

In the meantime you can override actions.blade.php

And use something like

                evaluatePageScrollPosition: function () {
                    //this.isSticky = document.body.scrollHeight >= window.scrollY + window.innerHeight * 2;

                    let scrollY = window.scrollY;
                    let viewportHeight = window.innerHeight;
                    let documentHeight = document.documentElement.scrollHeight; // Total page height

                    // Set isSticky to false when near the bottom, otherwise true
                    this.isSticky = scrollY + viewportHeight < documentHeight - 50;
                },

I found 50 pixels to be a nice sweetspot to toggle stickyness of the footer actions.

[SirFaenor]

Evolving @tuimz's answer, in my case document height was not calculated exactly until component has finished rendering, so add $nextTick to init event:

x-init="$nextTick(() => { evaluatePageScrollPosition() })"