My app has a search bar in its top area. There are devices with special cutouts. in order to expand the app to real full screen, I Added to <app_name>\android\app\src\main\AndroidManifest.xml:
<style name="ActivityTheme">
<item name="android:windowLayoutInDisplayCutoutMode">
shortEdges
</item>
</style>
That works fine. However, the obvious next step is to recognize cutout position, and place the search bar accordingly:
The mentioned documentation refers to a JAVA method WindowInsets.getDisplayCutout(). I wonder if there is an equivalent in flutter or a plugin which wraps it.
There is a SafeArea widget that will add insets so that you can avoid device. I'd give this a try - I know it works with common features like the iphone top cutout and the android camera.
Related
I am helping contribute a code and am stuck on a scrolling bug in flutter.
The screen when opened is started from the Google Maps widget
like this
But when I hold the screen and scroll above then the top content is displayed like this
Now, I cannot interact with the top content since when I release the scroll hold it bounces back to start at the map.
I hope I made senseI cant attach a video here to describe it more accurately.
Here is the link for the respective file associated with the screen,you can download it to check out the code:
The mobile app UI code starts from line 876.
Any help would be appreciated.
I haven't executed your code because it depends on lot of your other files but from reading your code I think the problem is occurring because of extendBodyBehindAppBar of Scaffold. (Checkout line number 114 in given file). Removing this argument or setting it to false should solve the problem.
From the docs :
If true, and an appBar is specified, then the height of the body is
extended to include the height of the app bar and the top of the body
is aligned with the top of the app bar.
This is useful if the app bar's AppBar.backgroundColor is not
completely opaque.
This property is false by default. It must not be null.
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
so - using material-ui v1.2.0 (and in all versions before). I started with the default example from the "Component Demos" / "Drawers" / "Mini variant drawer" example and changed
<AppBar position="absolute" className="...">
to
<AppBar position="fixed" className="...">
and now the issue is, that when I scroll down on iOS (tried on several iPads and iPhones) but I'm already at the top, the AppBar is overlaid by the background from the body (see attached screenshot with body {background:gold})
I already played with top:0 and/or adjusting the zIndex, but no success.
Thank you so much in advance
Ok, I was able to fix it - remove the
root: {... overflow:hidden ...}
And it works
I use the tinyscrollbar plugin on a site in a couple of sections.
So far, it was working great. But now for some reason, the scroll is avaible with the mousewheel but not with the drag/drop slider..
The resolution i'm using is 1360x768, but I test it in a 1920x1080 and the drag WORKS!
I check with firebug if the problem is an overlapping element over the slider but I can't see anything..
I didn't post any code, because I didn't make any changes on tinyscrollbar.js..
If you upgraded to windows 8 there is a bug where it only registers screen touch instead of both the screen and mouse... so you will need to address that
Check the z-index of the scroll bar element places it ontop of everything else (an arbitarily high z-index is fine for this purpose) as this can sometimes end up behind the custom scroll viewport meaning that when you go to drag the scroll bar you click on the wrong element.
I'm working on webpage for iPhone devices. This page has a div with overflow property set as below to implement native scrolling provided in iOS5.
.nativeScroll {
-webkit-overflow-scrolling:touch;
overflow:auto;
height:200px;
}
With above CSS style, scrolling is working fine. But scrollbar appears only when user touches the div and tries to scroll. Now the problem when untouched the scrollbar disappears which is default implementation. In this case, it looks like the div doesn't have any overflow content. So user may never bother to scroll.
So is it possible to make scrollbar always visible whether or not the div has touch?
Thanks
IMHO, I think there is no "clean" way to do it. But, you can use a third party lib like iScroll.
On the homepage, you can find a reference to the hideScrollbar. Its default value is true. You can set it to false for your needs.