Forum Discussion
In SPFX header/footer extensions, can I make footer scroll down along the main content of the page
- Dec 13, 2018If you want to achieve scroll-able footer SPFX header/footer extensions will not be a good idea as the SPFX footer extension has fixed positioning over the scroll-able area
Please have look at the conversation.
https://github.com/SharePoint/sp-dev-docs/issues/785
Hope this helps,
Thuyavan
TarundeepSinghTheta Hi, Did u overcame this issue? I have a similar issue where Header and Footer created through SPFx occupies most of the page. Any luck with CSS or scrollable event?
- TarundeepApr 04, 2019Copper Contributor
Hi,
The footer in SPFX extension have fixed positioning so its not possible for now to make if scroll able.
If you want it to be scroll able then you can add it in a web part and always keep that one the last web part on the page. But before that you need to hide all elements of the actual footer.
The other way around which I can think is to create a SPFX extension but make the footer hidden when user scrolls down. It might be tricky to manage the CSS.Regards,
- priyanka2110Oct 28, 2020Copper Contributor
Hi,
I want to make the footer availiable inside the scroll bar, did anybody find any solution to this?
Please let me know
- Diego_LonghiDec 16, 2021Copper ContributorThis thread is old, but this is still an issue due to the standard footer limitations.
I overcome this by creating an empty bottom placeholder to use its navigated events.
Created my react footer element in a const.
If the placeholder and its domElement exists, I add a scroll event to window to replace the standardfooter (html footer tag) using limited recursive tries to get it, as soon as its gotten, I use ReactDOM.hydrate with my element, but could be render.
Hope this helps somebody.