Portal Footer broken layout & positioning mobile devices only

[JamesHForsytheIV]

Please note that issues that do not follow this template will automatically be rejected.

Use the following form to submit ask a question related to this repo. If you have an issue related to the SharePoint Framework or its documentation, please submit the issue at https://github.com/SharePoint/sp-dev-docs/issues/new. This will help us respond to your issue faster.

---

Thank you for asking a question. We appreciate your feedback - to help the team to understand your needs, please complete the below template to ensure we have the necessary details to assist you.

(DELETE THIS PARAGRAPH AFTER READING)

Category

Portal Footer - Position and Layout suddenly broken

• [x] Question Does anyone have a solution for the portal footer layout and positioning breaking in mobile browsers only, appears fine in all other browsers?

The portal footer appears at the bottom of the page but stays fixed in front of the webparts and does not scroll properly.

Question

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[JamesHForsytheIV]

Footer should be sticky at the bottom but stays fixed

[bcameron1231]

Thank you for reporting this. We'll take look as a bug and add it to the backlog!

[JamesHForsytheIV]

Here is the workaround I used for this issue:

.sp-placeholder-bottom{ position: fixed!important; left:0px; bottom: 0; width: 100%; }

[Crowlertoo]

HI @JamesHForsytheIV My I ask ...where/how did you implement this workarround?

Here is the workaround I used for this issue:

.sp-placeholder-bottom{ position: fixed!important; left:0px; bottom: 0; width: 100%; }

[JamesHForsytheIV]

First I updated the PNP Footer to V2...

Next I modified our CSS file that is injected by PNP inject web extension with the following css:

.sp-placeholder-bottom { position: fixed!important; left: 0px; bottom: 0; width: 100%; z-index: 100; }

The placeholder previously worked this way in mobile OOB, the placeholder must have changed or there is some react core library missing on tenant...

[eoverfield]

@JamesHForsytheIV thank you for sharing the fix. I am glad the fix is working for you, though since you are providing new styling over elements that Microsoft does not support direct customization to, we cannot inject this directly into this project. MS could change that class name at any time, without warning, and we want this project to follow the practice of never touching aspects of the DOM that our custom components did not inject themselves.

Your fix is good, just be aware it may break at some point with no warning.

Overall though, when I went to test the collab / portal footer in iOS, it properly fixed to the bottom of the screen. Possibly MS fixed their footer placeholder container?

Im going to close this issue for now as the issue appears fixed.

[JamesHForsytheIV]

I’ll test what you mention but I doubt it’s fixed, there is also issue with OOB navigation on our tenant and not on another so I question what really works tenant to tenant.

On Fri, Jul 31, 2020 at 6:09 PM Eric Overfield [email protected] wrote:

@JamesHForsytheIV https://github.com/JamesHForsytheIV thank you for sharing the fix. I am glad the fix is working for you, though since you are providing new styling over elements that Microsoft does not support direct customization to, we cannot inject this directly into this project. MS could change that class name at any time, without warning, and we want this project to follow the practice of never touching aspects of the DOM that our custom components did not inject themselves.

Your fix is good, just be aware it may break at some point with no warning.

Overall though, when I went to test the collab / portal footer in iOS, it properly fixed to the bottom of the screen. Possibly MS fixed their footer placeholder container?

Im going to close this issue for now as the issue appears fixed.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/pnp/sp-starter-kit/issues/408#issuecomment-667407043, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQALJULTMU5ZAFFISVDXUO3R6M6H5ANCNFSM4OCYA47Q .

[Crowlertoo]

@eoverfield Hi Eric, I am having the same problem as James on two different Tenants. Just tested this with the Shareoint app on a IPad. The footer is still not sticking at the bottom. Why are you closing this issue while at least two users still have this problem on different Tenants.

To me the issue is not fixed.