CODEWITHSUNDEEP
androidcsscordovaintel-xdk
HQuser
HQuser

Reputation: 640

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

Bug 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

Upvotes: 1

Views: 733

Answers (2)

HQuser
HQuser

Reputation: 640

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.

Upvotes: 0

Blauharley
Blauharley

Reputation: 4256

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.

Upvotes: 1

Related Questions