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);
Related
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)
I'm trying to create a simple 3 line menu dropdown for mobile screens. I've got something that works, but it doesn't look consistent across devices. The icon's vertical positioning is changing depending on the OS and browser version. The icon should be centered vertically, but I'm seeing:
Linux -desktop
Firefox - slightly low vertical centering.
Chrome - seems to be in the middle.
Windows 8 -desktop
Firefox - seems to be in the middle.
IE 9-11 - seems to be in the middle.
Android
Firefox - very low vertical centering.
Chrome - slightly low vertical centering.
Here is the sample HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
and the sample CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}
and here is the jsfiddle link. Why won't the three line icon stay vertically centered?
Use line-height: 50px;, equals to the height of parent (div.mobile-bars) - TRY DEMO
HTML
<div id="nav">
<div class="mobile-bars">
≡
</div>
</div>
CSS
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
line-height: 50px;
}
[EDITED]
If you have <meta charset="utf-8"> inside the <head> element and using the CSS property line-height: 50px; doesn't solve your problem then I would recommend you to use an Image instead of html unicode character, If you really worry about Firefox on Linux and Android, icon's vertical position.
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 got page looks like this
<html>
<head>
</head>
<body>
<div class='canvas'>
Some content here, table other divs and others
</div>
</html>
div.canvas {
margin: 0px auto;
padding: 0px;
width: 600px;
}
I need to fit "canvas" div to screen in android webView. Unfortunately I can't edit page on server.
Is there any other option instead of download html string, them edit it local and display it in webView ?
With css you can set the height to 100%, the issues is making sure your WebView is set to fill_parent as well, it won't work with a wrap_content setting
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;
}