Develop Reference

Cordova Android white space between status bar and header

I've done almost everything but seems like I cant get rid of the white space between header and status bar as seen in the image
I am using Intel XDK version 3987 using Cordova plugin.
Any help to eliminate this error will be highly appreciated!
This is my source code:
pastebin.com/fPWJmiD8

To me it seems that your header-elements (data-role="header") have got a border-width of 1px that causes the whole content to move downwards.
Have you already tried to remove the border from each header?
CSS:
.ui-header{
border: none !important;
}
Hope this helps.

After several days of headbanging, trials and errors and detective work, I was able to find the real culprit.
The problem was caused because jQuery Mobile framework automatically on the runtime added the following classes to the header div having data-role="header":
class="ui-header ui-bar-inherit"
Those classes created an unwanted margin between the status bar and the header.
However, this problem was solved by removing those classes using jQuery during the runtime execution of the application.

CordovaWebView: Black screen when change div from display:none to display:block or use css3 translate

When I add a class to make appear a div (display:block) , suddenly view change to black screen. I touch the screen, elements in view still fire event.
How can I resolve the problem?

You should make sure you are using the most recent API (You can probably adjust this in eclipses android sdk manager).
If you still have any issues, make sure you have hardware acceleration on. You can adjust this in the manifest file:
<application
...
android:hardwareAccelerated="true"
...
>
If you still have an issue, try applying a css3 translate to something like your global body on app load. That will help to narrow down the issue. Otherwise, without some more code/information it's going to be hard to answer.
Let me know if I can help with anything else, but for what it's worth I haven't had this issue at all using the most recent android API and cordova 4.0.

Ratchet Framework scrolling in Android 2.2

Im using Ratchet Framework for andriod app development.
I have some scrolling problems in some android phones and also in bluestack.
when scrolled, a toomany blank spaces occurs and it affects the smooth scrolling. also affects the forms in the page. attached the image related
scrolling on some other devices is good , No extra space.

1) make sure you are using the meta tags provided by ratchet.
2) make sure you are inserting the bar-tab navigation at the top right after the body
From the ratchet getting started guide:
1. Fixed bars come first
All fixed bars (.bar) should always be the first thing in the of the page. This is really important!
2. Everything else goes in .content
Anything that's not a .bar should be put in a div with the class .content. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.
3. Don't forget your meta tags
They're included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.
If that doesn't help post some code and let us take a look at it

Android UIWebView overflow-y: auto with :hover

I have a very odd problem that doesn't happen in Chrome for Android, but it does happen when using a web view in an application in less than Android 4.4
The bug is:
When tapping in a 147px area near the sidebar, it causes the sidebar to open. This is because there is :hover on #sidebar. It is unexpected because the width is only 47px. It appears to be caused by overflow-y:auto. Removing this fixes the problem (But breaks the application as I need the scrolling)
I am using Android 4.3. It does NOT happen in 4.4 because the web view rendering engine is different.
The following behavior happens. I have a #sidebar that is collapsed at 47px
I have the following css.
#sidebar:hover
{
width:175px;
}
#sidebar
{
width:47px;
overflow-y:auto !important;
}
Here is a visual of the problem:
I am looking for a way to fix this and still retain functionality of overflow: auto

I found a workaround as this seems like a browser bug. I ended up doing min-height: 1000px on #sidebar instead of doing the overflow, this is not perfect but it works

Android Phonegap Scroll not work

i developed an android app by using html5 and phonegap (cordova 2.7.0); it's an application for image search, use the google API.
Returns a list of images that start with a tap.
It works perfectly on almost all devices, but on small screens with Android 2.3.x, scrolling (or click on image) does not work.
Any suggestions?
Thanks in advance.

You have run into an android bug. Overflowing DIVs inside BODY tag wont allow you to scroll. Same bug was there in iPhone (iOS < 5), but there atleast you could use two fingers and scroll.
However there are workarounds for it. You can use third party libraries such as iScroll, touchScroll ...
iScroll will disable your inputs for the div which you have applied scroll to. If its a simple paragraph use iScroll.
Reference

While 2-Stroker's answer is the correct one here is a quick and dirty solution, add a few <br> tags at the end. Worked for me ;)

If you don't want to go through the trouble of adding iScroll you can also use:
// Workaround for problematic scrolling behaviour on Android
// we can't fix this in css directly as it breaks iOS and the
// platform selector in css is unreliable
if ( device.platform === 'Android' ) {
$('.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active ').css("position", "initial");
}