I'm having some issues getting the 'overscroll glow' to work on a scrollable div.
The first problem is finding answers or documentation on this because this thing has a lot of names, I'm not entirely sure what the correct term is and most of them I tried confuse google (i get a lot of results for 'overflow:auto;' etc). So for clarity, here's an image of the effect I'm looking for:
Anyway, my problem is this: I did have this effect when my html/body elements were scrollable but when I moved things to divs (in this case the .content element), it stopped working.
Something like this:
html, body {
overflow: hidden;
width:100%;
height:100%;
margin:0;
padding:0;
}
.appbar {
position: absolute;
top:0; left:0; right:0;
height:56px;
background-color:#ccc;
}
.content {
position: absolute;
top:56px; left:0; right:0; bottom:0;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
}
.make-it-scrollable {
height:200%;
}
<body>
<div class="appbar"></div>
<div class="content">
<div class="make-it-scrollable"></div>
</div>
</body>
On iOS I get the elastic 'rubber banding' effect when I try to scroll past the content (thanks to the -webkit-overflow-scrolling) but on Android I get nothing.
Is this by design? (meaning: is the overscroll effect disabled or 'not implemented' for divs with overflow:x?
Or am I missing something?
Oh btw I'm testing this on Android 5.1 with the latest Chromium based webview (it's a cordova app)
Related
I like to build horizontally laid out, vertically-fitted image galleries like this:
<html style="height: 100%">
<body style="height: 100%">
<div class="someContainer" style="height: 100%">
<div class="galleryContaineer" style="height: 100%; white-space: nowrap;">
<img width="1000" height="2000" style="max-height: 90%; width: auto; height: auto" />
...
</div>
</div>
</body>
</html>
This seemed to be fairly well supported... Well, until i tried it on Firefox for Android (31.0 on 4.4.4). Which probably no one uses.
Apparently the nowrap causes Firefox to compute the body's height way to big, which kills the vertical-fitting. Consider this fiddle: http://jsfiddle.net/W5a6V/7/ which you might have to open unwrapped http://fiddle.jshell.net/W5a6V/7/show/ (if this link ends up dead, just inspect the proper fiddle and open the result iframe's src in a new tab) because the iframe somehow fixes this mess.
Sorry #jsfiddle for a whole bunch of binary :) — alternatives welcome.
After a couple of hours I resorted to a technique which I gave up for the less CSS-heave approach shown above.
You have to force Firefox to limit the body's height to the actual viewport's height, which can be done with media queries, like this:
#media screen and (min-device-height: 0px) { body { max-height: 0px; } }
#media screen and (min-device-height: 100px) { body { max-height: 100px; } }
#media screen and (min-device-height: 200px) { body { max-height: 200px; } }
And so on. I guess there is a cool name for this. It's pretty robust and helped me in circumstances where the imgs had to be individually wrapped in some kind of container, too, think captions.
If one of your containers is positioned absolutely, you might have to apply the max-height to it, instead of the body.
While I fixed this - see answer below - other ideas are highly appreciated.
Here's the fiddle: http://jsfiddle.net/W5a6V/9/ and http://fiddle.jshell.net/W5a6V/9/show/ respectively.
Update: Forgot to check back in Webkitland... where it does break the original layout. Gotta target Firefox by adding and (-moz-touch-enabled: 1) to the media query. Yuck!
Issue shows up on Android browsers when the following are on a page:
A div element with a size larger than the device's viewport. (I used 1200px.)
One or more other div elements with either left:0; right:0; margin:auto; or left:50%; margin-left:-100px style centering.
The issue is that the "centered" div elements actually aren't. They have an offset to the left (or top if centering vertically). The problem shows up on Android devices in both Chrome and Dolphin (WebKit). It does not show up on desktops (tested Chrome, FireFox, Safari, and IE).
Here is some example CSS:
body{ margin:0; padding:0; }
.wide-element {
position:absolute;
height:800px; width:1200px;
left:50%; margin-left:-600px;
background:url(1200px-wide.png);
}
.fixed-1, .fixed-2, .absolute-1, .absolute-2 { height:200px; width:200px; }
.fixed-1 {
position:fixed; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(0, 0, 255, .5);
}
.fixed-2 {
position:fixed; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid blue;
}
.absolute-1 {
position:absolute; margin:auto;
left:0; right:0; top:0; bottom:0;
background:rgba(255, 0, 0, .5);
}
.absolute-2{
position:absolute; margin:-105px 0 0 -105px;
left:50%; top:50%;
border:5px solid red;
}
And the HTML:
<body>
<div class="wide-element"></div>
<div class="fixed-1"></div>
<div class="fixed-2"></div>
<div class="absolute-1"></div>
<div class="absolute-2"></div>
</body>
I added the position:fixed pair to contrast with the position:absolute pair. As you can see in the following screenshot, the fixed divs are both at the actual center of the screen, while the absolute divs are slightly up and to the left of the center of the layout. The most problematic part is that this offset causes elements on the left side of the screen to be cut off, and unreachable.
I'd like to know why (exactly) is this happening (and why only on mobile devices), but the real question is:
How can I reliably center a div element that might be larger than the viewport, without Android devices making parts of the page unreachable?
This is a provisional answer to my own question.
Adding a <meta name="viewport" content="width=1200"> line to the head section seems to force the browser to set the viewport to the specified size. However, since this isn't a true fix, and others may need a more flexible solution, I'm leaving it open for a more complete answer.
I try to build a simple app with cordova which target android
I just want to have a scrollable div but
if the content is smaller than the div's height, the scrollbar is always visible
if the content is bigger than the div's height, the scrollbar never appear, even if I scroll : the scroll is possible but no scrollbar position indication
My layout is simple :
<body>
<div id='views'>
<div class='view'>
Lorem ipsum ...
</div>
</div>
</body>
Css is simple too :
#views {
position : absolute;
top:0; right:0; bottom:0; left:0;
}
.view {
position : absolute;
top:0; right:0; bottom:0; left:0;
overflow-x : hidden;
overflow-y : scroll;
-webkit-overflow-scrolling : touch;
overflow-scrolling : touch;
}
Then I use command : cordova run android
note :
I use cordova version 3.3.1-0.3.1
test on Nexus 7 updated (android kitkat)
with last android API : 19
Thanks for your help
edit : I just try with iOs simulator (iOS 6.1), the scrollbars are visibles when I scroll ...
[updated]
Thanks to help me.
Here is is the correct code to have scrollbars on android
[updated 2]
It's not totally ok, try this, the whole window scroll, not only the .view content
HTML
<body>
<div id='views'>
<div class='view'>
Lorem ipsum ...
</div>
</div>
<div id='menu-bt'></div>
</body>
CSS
.view {
position:absolute;
top:0; right:0; bottom:0; left:0;
overflow:visible;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
#menu-bt {
position:absolute;
right:40px; bottom:40px;
width:50px; height:50px;
background-color:green;
}
Then, add this line in file /plateforms/android/src/io/cordova/myProject/MyProject.java
super.appView.setVerticalScrollBarEnabled(true);
Tested here and changing your overflows to visible it works.
Also, make sure to enable the scrollbars in your Android Activity file (as pointed here) by adding the following line:
super.appView.setVerticalScrollBarEnabled(true);
Go to: SystemWebViewEngine.java which located in
yourAppName\platforms\android\CordovaLib\src\org\apache\cordova\SystemWebViewEngine.java
Set webView.setVerticalScrollBarEnabled(true);
I'm developing a phone-gap application and testing it on 3 android devices. Some codes are:
Main area:
<body>
<div data-role="page" id="home">
<div class="banner"></div>
<div id="another_div">Welcome</div>
<div class="blank_div"></div>
<img src="img/connecting2.png" alt="Loading..." id="loading"/>
<div data-role="footer" class="footer_div">
</div><!--Footer-->
</div>
</body>
Some css:
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
display:block;
background-color:#FF0;
}
#now_play_div
{
white-space:pre-wrap;
font-size:1.5em;
position:fixed;
height:7%;
display:block;
background:#FFF;
width:100%;
text-align:center;
top:30%;
padding-top:1%;
-webkit-marquee: auto medium infinite scroll normal;
overflow-x: -webkit-marquee;
border-radius:10px;
}
.blank_div
{
width: 100%;
min-height:41%;
max-height:41%;
margin-left:auto;
margin-right:auto;
display:block;
}
.footer_div
{
color:#FFF;
position:fixed;
height:10%;
display:block;
background:#46639d;
width:100%;
text-align:center;
bottom:0px;
padding:1%;
}
Now the banner is fixed. blank_div is used so that my main content doesn't go under the fixed banner. After some work the loading image will be gone and filled with some dynamic content. I can scroll that content but my banner and footer is fixed. another_div is fixed too.
This system works perfectly on Sony ericsson(android version:2.3) and symphony(android version:4.0.4). But fails to work properly on Google nexus 7(Android: 4.3) In nexus while I scroll my main content that is dynamically loaded just under the blank_div the banner started to fall down. WEIRD!!!!!! While my contents go up, banner comes down. But in other 2 devices it works just fine. Does anybody know what's wrong?? Or what I'm missing?
I guess no more answer will come. So here is the answer which I found from #Era's comment.
.banner
{
width: 100%;
min-height:40%;
max-height:40%;
position:fixed;
top:0%;
left:0%;
display:block;
background-color:#FF0;
}
I have a toolbar at the bottom of my mobile webapp. I'd like to be able to drag this toolbar up and down, revealing content underneath it. I'd like to be able to do this simply by using HTML/CSS, and not having to use touch/scroll events or mobile touch/scroll libraries.
I am trying to do this by overlaying a scrolling element on top of the main webapp with the toolbar and its content at the bottom. I've given this element a lower z-index than the main content so that it doesn't block the user from interacting with the main content, and given the toolbar and its content a higher z-index so that it can be seen and pulled/scrolled up.
I have created a jsFiddle that has the correct behaviour in both desktop and Android versions of Chrome. I can drag up the toolbar with my finger or by scrolling with my cursor on top of it:
Unfortunately, the toolbar does not appear in the Android browser (tested on 4.1 and 4.2).
However when I press where the toolbar should be and drag up, it doesn't scroll the page until I have moved my finger far enough to have scrolled the toolbar all the way up, if it were visible. This is how scrolling the toolbar works in Chrome, and indicates that the toolbar is scrolling properly in the Android browser. It just isn't visible.
<div id="main-content"></div>
<div id="scroller">
<div id="wrapper">
<div id="toolbar-and-content">
<div id="toolbar">Toolbar</div>
<div id="toolbar-content">Toolbar content</div>
</div>
</div>
</div>
#main-content {
position:relative;
width:100%;
height:300px;
background-color:green;
z-index:1;
}
#scroller {
position:absolute;
top:0;
width:100%;
height:300px;
overflow:auto;
}
#wrapper {
position:relative;
width:100%;
height:500px;
}
#toolbar-and-content {
position:absolute;
bottom:0;
width:100%;
height:250px;
z-index:2;
}
#toolbar {
width:100%;
height:49px;
border-bottom:1px solid black;
background-color:red;
}
#toolbar-content {
width:100%;
height:200px;
background-color:orange;
}
I figure it doesn't work on the Android browser because it is deciding to ignore the toolbar's higher z-index, since it's in an element with a lower z-index.
Either way, does anyone know how I might be able to change this so that it would work on the Android browser, and/or are there other layout schemes I can use to achieve what I desire through only HTML/CSS?
I tested your example in Emulator, try add:
z-index: 2;
to your #scroller:
#scroller {
position:absolute;
top:0;
width:100%;
height:300px;
overflow:auto;
z-index: 2; // NEW
}
Worked fine for me
Why do you need z-index on #main-content? If you could just skip it than it would work even without additional z-index on #scroller.