SPFX in Teams Tab - Scroll problem in mobile app - microsoft-teams

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?

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!

Related

Why does Xamarin Forms Picker has transparent selector modal?

I have create a new view in order to be sure the opacity is not applied for some resource in my app, but for some reason it is not working in a clean enviroment neither.
I have checked the XF documentation and the modal with all the items should render in a solid color.
I have found the emulator was rendering a wrong modal for the picker, maybe it is caused by the default theme on the emulator. I have tested the app on a real device and seems to be ok.

Zurb Foundation top-bar dropdown doesn't work on hover

I built a site on Foundation framework with vanilla css and then got into Sass, so I converted site to Sass to take advantage of easy customization going forward. Unfortunately when I did, the top-bar stopped functioning properly. The dropdown no longer works on hover. I can click to get it to dropdown, but it won't automatically drop down, as expected, on hover. Anyone else having this issue?
site here: http://www.parker-gibson.com/testing/lifedesign
Thanks in advance for any insight into this problem!

Navigation in mobile application does not work in kendoui professional 2014.1.528

I updated to version 2014.1.528 kendoui in my mobile application. When I run and navigates to another view, it is in the newly opened view, I can not click on anything. I see that the div element where the views are added style pointer-events: none; In the old version all is well.
I tried to run the official demo kendo ui mobile and as I click on: Remote view, it does not work. But only downloaded demos. On the http://demos.telerik.com/kendo-ui/mobile-view/index, is well

ASP.NET MVC 3 new project template - modernizr not working with IE8?

I like the new New Project templates included in the ASP.NET MVC3 tools update, as presented at MIX 11 recently.
A basic site can be seen here:
http://mix11.haacked.com/
When I view the above site in Chrome, the HTML5 styles are visible - rounded corners and text shadow.
When I view the site in IE8 those styles aren't visible.
My question is, isn't Modernizr supposed to make these styles work in older browsers?
-Matt
Modernizer won't actually add missing functionality to a browser. Basically, you use it as a guide to tell you whether a browser supports a certain feature. In your case, you could have a CSS file which will compensate for browsers that don't support border radius:
.no-borderradius div {
/* properties for browsers that don't support border-radius */
}
The above is a total made-up example, I'm not sure 100% if it's correct, but check the documentation here.
So for IE8, you would need to display rounded corners using a different technique.

<img> tag greyed out in firebug hence found the reason for image not showing up. Need help fixing it

I'm debugging a website for missing images. The website heavily uses GWT hence the source code is not so verbose. I started debugging it with firebug and found out that the tags are all greyed out in the firebug DOM source. If I edit the image tag in firebug console, say by adding just a space, then the image tag is not greyed anymore hence showing up on the page.
Can someone here please point out why the image tags are greyed out in firebug and how to resolve this issue.
Note: there are other images in the page which are working just fine, even they are generated using GWT in the same way.
Most likely - the image is hidden (via CSS probably). Click on the tag to see the styles applied to it - most likely you'll see display: none or something of similar effect.
As to why the image(s) are hidden - either the CSS rules got mixed up and resulted in such behaviour (Firebug should help with the investigation) or it's part of the application logic (hide the progress bar when not needed, etc).
In my case my image was grayed (greyed) out in firebug due to the image having its height and width to 0 px so effectively it was hidden on the screen. so i deduce that grayed out means its not visible on the screen.
I had the same issue with social networks icons, and it was also Ad-Blocker (under Firefox) causing it.
The alternative text of the icons had alt="Facebook" (Twitter, Instagram) in it. Changing that to alt="Facebook_xxx" was enough to solve the issue.
I was having the same problem. Firebug was showing my container element, which had an img, as grayed out. The element was displayed in Firefox (and other modern browsers), but not in IE8.
Knowing I was setting display:none; and later in the script making it block, wasn't my issue... adding a missing width and height in the style was the fix for me.
For me, it was a matter of explicitly setting the width and height on my div (that holds my img) inside the container div. I did not have width and height on my absolutely positioned div. As soon as I added that the grayed out was solid in Firebug. Also fixed my missing div problem in IE8! (Which was what set me on the debugging path in the first place)
IE8 likes width and height set, where all other modern browsers didn't care and still displayed the div. Firebug showed the element grayed out, but Firefox the browser displayed the div element just fine.
#slidesContainer {
position: relative;
width: 871px;
height: 275px;
padding: 8px 8px;
overflow: hidden;
}
#slidesContainer div {
position: absolute;
width: 871px;
height: 275px;
display: none;
}
As an FYI for other people, I was having this problem and couldn't figure it out - Firebug correctly greyed out the invisible images. I am running the AdBlock Plus add-on and it was hiding the images because they were in a folder called ads. The giveaway was that the images has classes added with random string e.g. class="auwhaezfynjjayjvlasn". I changed the name of the ads folder and voila, visible and not not greyed out in Firebug any more.
Another FYI - my FILE was named xxx-ads.swf and the file would NOT display in Firefox or Chrome but worked fine in Safari, IE and Opera.
I am running Adblock plus in Firefox and Chrome.
It seems to me that as a general software practice, Adblock is trying to be too smart in it's detection. Cost me about 2 days of debugging. Grrrr.
Thanks goodness i finally found this forum.

Resources