Keyboard pushing up navigator bar

Question

Here is an image of my problem in an app:

Here is my code: http://pastebin.com/JckpYKYz

Any solution?

I thought to hide the status bar when the keyboard appears on that page.

Thanks!

Answer 1

In cordova by default the status bar is shown. you can hide the status programatically by adding some code in your cordova project. Your situation can be managed easily by changing some native codes.

Open your project,

collapse "CordovaLib.xcodeproj" >> Classes >> Cleaver >> CDVViewController.m

In that file you cvan find a function called

- (void)viewDidLoad

in that enter the below code line

[[UIApplication sharedApplication] setStatusBarHidden:YES];

Mine look like this,

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSURL* appURL = nil;
    NSString* loadErr = nil;
    [[UIApplication sharedApplication] setStatusBarHidden:YES];
    [[webView scrollView] setBounces: NO];
    if ([self.startPage rangeOfString:@"://"].location != NSNotFound) {
        appURL = [NSURL URLWithString:self.startPage];
.......

[OR]

If you wan to show status bar all time and just want to hide it when the keyboard come up,

then check for another function in the same file called,

- (void) keyboardWillShow:(NSNotification *)note {

and enter the below code line,

[[UIApplication sharedApplication] setStatusBarHidden:YES];

and in,

- (void) keyboardWillHide:(NSNotification *)note {

enter the below code line,

[[UIApplication sharedApplication] setStatusBarHidden:NO];

In some cordova version there will be only this,

- (void)keyboardWillShowOrHide:(NSNotification*)notif

in that situation write a condition to check if keyboard is shown or hidden and put the above code line in them to show and hide status bar.

Hope this is what you are looking for, please accept the answer if you are satisfied. Good day!

Answer 2

I think that it is css problem. Probably height of the HTML compoentn is specified with "%". Specify height with "px" or use position: absolute.

Displaying the software keyboard affects the height of html element.