2

I am having a SPFX-Webpart as static teams tab. I builded the manifest manually (like here https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart). This is working fine so far.

But my problem is, that the container is not scrollable in the mobile app (android in my case). The content of my webpart is longer then the display/page and I just can't scroll down. The cause of this problem: there is a div container (with the classes "spAppAndPropertyPanelContainer" and "sp-appBar-parent-mobile) which has overflow set to hidden. This container is rendered by sharepoint or teams but not by my webpart.

So I can set custom css to override the default css and overcome this issue. Its working fine. But why is this container set to overflow hidden? Are there any reasons for this and do I have any issues later on by having my custom css to override this overflow behavior?

Or is there an other solution to have scrollable content in a custom spfx app in teams mobile?

devil_inside
  • 412
  • 3
  • 9
  • This is mostly happening due to css is getting overridden – Trinetra-MSFT Nov 20 '20 at 07:11
  • Overridden by what? I mean it looks kinda if the css is coming from SharePoint/Teams. Even with a kinda default spfx webpart scrolling was not possible – devil_inside Nov 20 '20 at 22:25
  • this can be overriden by ms-teams-ui-style.css for tab which is default css library for team tab, i suggest you add your own css rule to spfx webpart – Trinetra-MSFT Nov 24 '20 at 06:48

1 Answers1

2

I came across the exact same issue today and I solved it by adding the following code to my css file in Visual Studio (tested on iOS):

.spAppAndPropertyPanelContainer, .sp-appBar-parent-mobile { 
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

I hope this might help you!

Benedikt
  • 45
  • 7
  • Yes this is a solution to this problem. But is this causing new problems or is there a "out of the box" way to solve this or am I doing something wrong in the first place? – devil_inside Nov 23 '20 at 19:45
  • What problem is it causing? – Abhijit Nov 24 '20 at 07:58
  • The CSS override is causing no problem so far. But since there are so many devices, browsers and MS will probably change it in the future: it just does not feel right to do so and I am searching for a "solution" without having to override the CSS :( – devil_inside Nov 25 '20 at 17:07