ng-view will not auto hide address/navigation bar on mobile devices - javascript

I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.

This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.

Related

reducing the component's height when the soft keyboard is visible in React/Next

when I try to make a Next/React project in which I have an invisible input.
Almost the whole page is my label for that input.
when I use my mobile browser and the soft keyboard appears it forces the page to be scrollable which interferes whit my design
I want to either adjust the size of the page so that the
height(page)+height(keyboard)=height(screen)
or
make the whole page unscrollable.
I don't know why but it is scrollable in Brave browser but not in Opera GX browser
I want it like it is on Opera GX.
I tried setting the overflow of html, body & #__next to "hidden"
but that didn't work.
You can see what I am talking about on my website: phew

Full page scrolling plugins (fullPage.js, scrollify.js, etc) prevents default mobile Safari UI behavior

On iOS devices, scrolling plugins like Scrollify.js, FullPage.js, and OnePage-Scroll.js seem to keep Safari's address and navigation bars in place, instead of the way they typically minimize when the user scrolls the page.
Is there any kind of workaround for this? I understand that when those UI bars minimize, the inner viewport height is changed, and so the plugin would need to recalculate the height. Also, the UI minimizes during the scroll event, and maybe that's problematic for the scrolling plugin? Is there a way to maybe hide the UI when the scroll event finishes?
When you change the orientation of the iPhone from portrait to landscape, the bars disappear, but if you bring them back by tapping the top or bottom, they stay put when you scroll.
I'd really like to have that extra height!
Is there any kind of workaround for this?
You can also use it without autoscrolling, but that might no be what you are looking for: autoScrolling:false.
If you are worried for the landscape mode, if you avoid using anchors and you load the page in portrait mode to then change to landscape, it won't show the top bar at all on iOS at least. Not the best solution, but it might help.
Personally I would recommend you to use the option responsiveWidth or responsiveHeight to change the behavior of the page on small screen devices and remove the auto scrolling and possibly have bigger sections.
In general, mobile browsers do not allow access to the top or bottom bars behaviors and there's no much developers can use to deal with them.

Dojo mobile show scroll bar

Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.

Android scrolling inside HTML containers, which has a CSS overflow property

I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?
The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.

jquery mobile web app leave empty white space at page bottom

I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.

Categories