Chrome mobile ignores overflow
I am playing around with building a webapp for android. I am using telephony with JQM but I am facing a problem.
I am implementing a slide menu and I found a simple example on the internet for that.
http://www.aldomatic.com/jqm/fb-menu-style/
This simple menu slides to the left and this part works great, but when I try to offset it I have a problem. The whole page is scrolling, and this is despite the fact that I have
#mobileViewport {
overflow: hidden;
}
(The body tag has an id mobileViewport
I also tried adding it to the html tag but to no avail.
This is mistake? and is there a workaround?
source to share
By default, JQM pages are positioned absolutely , out of the flow of their containing element (if the containing element is statically located).
Adding overflow:hidden
to the contained element (body) will therefore not help.
If you apply position:relative
to #mobileViewport
, which should cause JQM mobile pages to now work correctly with the containing element, but overflow:hidden
should.
However, I suspect this is probably not a good idea and is related to other CSS display issues. (I remember playing with it once and had other problems as a side effect)
Probably the best idea is to add overflow: hidden directly to the JQM page elements.
<body class="ui-mobile-viewport">
<div id="mypage" data-role="page" class="ui-page">
...
</div>
</div>
#mypage {
overflow:hidden;
}
NOTE. If you have a footer you can apply overflow:hidden
to the child .ui-content
.
source to share