SOLVED

In SPFX header/footer extensions, can I make footer scroll down along the main content of the page

%3CLINGO-SUB%20id%3D%22lingo-sub-301187%22%20slang%3D%22en-US%22%3EIn%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-301187%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20react%20SharePoint%20Framework%20Extensions%20to%20create%20my%20header%20and%20footer%20for%20the%20site.%20Right%20now%20the%20footer%20is%20fixed%2C%20as%20it%20will%20stay%20on%20the%20page%20even%20if%20you%20scroll%20down%20the%20content.%20As%20my%20footer%20have%20good%20number%20of%20links%2C%20so%20in%20this%20case%20it%20will%20consume%20some%20space%20on%20the%20screen%20and%20will%20not%20go%20away.%3C%2FP%3E%3CP%3EI%20want%20to%20make%20the%20footer%20scroll%20with%20the%20content%2C%20if%20the%20page%20have%20more%20data%20in%20it%20then%20the%20footer%20should%20be%20at%20the%20bottom%20after%20the%20main%20content.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20possible%20%3F%20please%20suggest%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-301187%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EResponsive%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-396776%22%20slang%3D%22en-US%22%3ERe%3A%20In%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20pa%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-396776%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F314040%22%20target%3D%22_blank%22%3E%40spfx-123_new1240%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EThe%20footer%20in%20SPFX%20extension%20have%20fixed%20positioning%20so%20its%20not%20possible%20for%20now%20to%20make%20if%20scroll%20able.%3C%2FP%3E%3CP%3EIf%20you%20want%20it%20to%20be%20scroll%20able%20then%20you%20can%20add%20it%20in%20a%20web%20part%20and%20always%20keep%20that%20one%20the%20last%20web%20part%20on%20the%20page.%20But%20before%20that%20you%20need%20to%20hide%20all%20elements%20of%20the%20actual%20footer.%26nbsp%3B%3CBR%20%2F%3EThe%20other%20way%20around%20which%20I%20can%20think%20is%20to%20create%20a%20SPFX%20extension%20but%20make%20the%20footer%20hidden%20when%20user%20scrolls%20down.%20It%20might%20be%20tricky%20to%20manage%20the%20CSS.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERegards%2C%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-394516%22%20slang%3D%22en-US%22%3ERe%3A%20In%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20pa%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-394516%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F244492%22%20target%3D%22_blank%22%3E%40TarundeepSinghTheta%3C%2FA%3E%26nbsp%3BHi%2C%20Did%20u%20overcame%20this%20issue%3F%20I%20have%20a%20similar%20issue%20where%20Header%20and%20Footer%20created%20through%20SPFx%20occupies%20most%20of%20the%20page.%20Any%20luck%20with%20CSS%20or%20scrollable%20event%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-301680%22%20slang%3D%22en-US%22%3ERe%3A%20In%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20pa%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-301680%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20for%20that%20Thuyavan.%20That%20was%20helpful.%20%3A)%3C%2Fimg%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20not%20planing%20to%20make%20it%20a%20click%20open%20and%20close%20footer%20menu%20instead.%20Is%20there%20any%20other%20way%20I%20can%20achieve%20this.%3C%2FP%3E%3CP%3EThanks%20in%20advance.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-301192%22%20slang%3D%22en-US%22%3ERe%3A%20In%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20pa%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-301192%22%20slang%3D%22en-US%22%3EIf%20you%20want%20to%20achieve%20scroll-able%20footer%20SPFX%20header%2Ffooter%20extensions%20will%20not%20be%20a%20good%20idea%20as%20the%20SPFX%20footer%20extension%20has%20fixed%20positioning%20over%20the%20scroll-able%20area%3CBR%20%2F%3E%3CBR%20%2F%3EPlease%20have%20look%20at%20the%20conversation.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F785%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F785%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3EHope%20this%20helps%2C%3CBR%20%2F%3EThuyavan%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1828082%22%20slang%3D%22en-US%22%3ERe%3A%20In%20SPFX%20header%2Ffooter%20extensions%2C%20can%20I%20make%20footer%20scroll%20down%20along%20the%20main%20content%20of%20the%20pa%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1828082%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F149964%22%20target%3D%22_blank%22%3E%40Tarundeep%20Singh%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20want%20to%20make%20the%20footer%20availiable%20inside%20the%20scroll%20bar%2C%20did%20anybody%20find%20any%20solution%20to%20this%3F%3C%2FP%3E%3CP%3EPlease%20let%20me%20know%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

I am using react SharePoint Framework Extensions to create my header and footer for the site. Right now the footer is fixed, as it will stay on the page even if you scroll down the content. As my footer have good number of links, so in this case it will consume some space on the screen and will not go away.

I want to make the footer scroll with the content, if the page have more data in it then the footer should be at the bottom after the main content.

 

Is this possible ? please suggest

5 Replies
best response confirmed by TarundeepSinghTheta (Occasional Contributor)
Solution
If 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

Thanks for that Thuyavan. That was helpful. :) 

I am not planing to make it a click open and close footer menu instead. Is there any other way I can achieve this.

Thanks in advance. 

@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?

@spfx-123_new1240 

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,

@Tarundeep Singh 

 

Hi,

 

I want to make the footer availiable inside the scroll bar, did anybody find any solution to this?

Please let me know