We have the same issue in our current app and need this bug fixed for our release. Thanks !

I'm not sure I see this bug. I tested in a new project (2.6.0, and current master) and set the two properties to true.

Hi Shazron!
Using cordova 2.7.2 settings this two flags to true results in following error:

Adding following workaround in CDVViewController.m fixed the issue. I guess it's not the most beautiful fix, but it works for now.

if ([@"true" isEqualToString: self.settings[@"HideKeyboardFormAccessoryBar"]]) {
       newFrame.size.height += 45;
}

I realize that - I just can't replicate it in a "new project". I can't fix it (or verify a fix) if I don't see the problem. Any other config.xml settings that are set, that are not the default?

those are my preferences

    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="BackupWebStorage" value="cloud" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="EnableLocation" value="false" /><!-- DEPRECATED -->
    <preference name="EnableViewportScale" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value=".5" />
    <preference name="HideKeyboardFormAccessoryBar" value="true" />
    <preference name="KeyboardDisplayRequiresUserAction" value="true" />
    <preference name="KeyboardShrinksView" value="true" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="TopActivityIndicator" value="gray" />

My preferences

<preference name="DisallowOverscroll" value="true" />
  <preference name="orientation" value="portrait" />
  <preference name="target-device" value="universal" />
  <preference name="prerendered-icon" value="true" />
  <preference name="fullscreen" value="false" />
  <preference name="show-splash-screen-spinner" value="true" />
  <preference name="KeyboardDisplayRequiresUserAction" value="false" />
  <preference name="SuppressesIncrementalRendering" value="true" />
  <preference name="HideKeyboardFormAccessoryBar" value="true" />
  <preference name="KeyboardShrinksView" value="true" />

The only significant difference is I see DisallowOverscroll=true, which after setting it I still don't see the bug. I do see a brief flash of white though, but it goes away.

My additions to index.html, with a new project:

       <div style="position:fixed;top:0">
        <input type="text" value="test" />
        <button>TESTSSTGSGSGSG</button>
        </div>

Perhaps you two can add that to a new project, load, and tap on the textfield? So we can verify results.

Thanks Christoph Atteneder for the workaround - where is this supposed to be patched? Somewhere here I reckon?: https://github.com/apache/cordova-ios/blob/d8d9f3b3a3420d4e0a8597ce8935dfc3f4ba3339/CordovaLib/Classes/CDVViewController.m#L129

yes in the if (showEvent) condition.

Regards,

Christoph

Hi Shazron,

using a fresh project it works for me as well. I'll check out a diff of my current project to the default project.

Cheers,

Christoph

I just removed the whole platform ios folder from my old project and added it again with

cordova platform add ios

and

cordova build ios

. In this case I still see the error.

But now comes the strange thing, if I copy the www folder from the clean new project and copy it over the www folder of my existing project, the error is gone.
I already checked with the safari debugger in my existing project if this gradient bar is somehow part of the body and set the visibility of the body to hidden. Still this strange bar shows up.

A page redirects (hash is set in url) happens on startup - if I kick that out, I don't see this error anymore. It's kind of weird and I'm looking into it right now. Do you have an idea?

Regards,

Christoph

That tells me whatever the cordova CLI tool is copying over might be old stuff. I would always verify using the actual repo source.

If there is no other data, I will close this as No Repro.

Hi Shazron,

sorry for not replying. We had public holidays Friday and Monday. The thing I wanted to mention is, that it has nothing to do with the project settings or so on, it's all about what's happening in the www folder within the webview. Unfortunately I don't have an idea what exactly is causing this issues. I'll try to create a minimal emberjs project that has a similar setup as mine.

Regards,

Christoph

Sorry for the late replay, same holiday

I've created a new project and everything works as it is supposed to.
Guess a clean install with 2.8 will do it for me.

Horst

Thanks Christoph and Horst, I'll resolve this as No Repro for now. Once you can get a repro, feel free to re-open and I'll see if a fix can get into 2.8.0, if not it will be 2.9.0

Hi Shazron,

I've ported my project to version 3.0 the last couple of days and i like it a lot. Great job.

Unfortunately the "white bar" issue appeared again.

I've created a new project via the CLI and by setting the HideKeyboardFormAccessoryBar and KeyboardShrinksView properties in my config.xml the white bar appears again. I did not use any old code except the www files from my project. I'm still running iOS 6.1.3

As a quick fix the solution Christoph described earlier worked perfectly with a tiny tweak.
CDVViewController.m line 139

if (showEvent) {
        newFrame.size.height -= keyboardFrame.size.height;
        if ([@"true" isEqualToString :[self settingForKey:@"KeyboardShrinksView"]]) {
            newFrame.size.height += 45;
        }
    }

Horst

I can confirm that this is repro'ing in my Cordova 3.0 project as well.

Also have this problem with Cordova 3.0.

The workaround that Horst Perfect posted is working when the keyboard is fully
shown, but the white/grey gradient bar can still be seen when the keyboard slides up.

Take a look here http://imgflip.com/i/3c5wm

The Horst Perfect solution works perfect on iOS 6.1x but the toolbar is still showing white on iOS7.

Indeed, I've tested it today with the iOS7 GM and the bar appears again.

Can we bump up the priority of this issue? This is going to be a deal breaker for IOS7 which is being released tomorrow.

I also noticed that these two settings are missing from config.xml now in the default 3.0 project.

<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="true" />

Are these settings deprecated now?

It seems like KeyboardShrinksView is enabled by default now for 3.0. Did something change in 3.0 around HideKeyboardFormAccessoryBar? In order for HideKeyboardFormAccessoryBar to work, you also need KeyboardShrinksView set to true.

Thanks!

Totally agree with Tom Wilson. For me, that's a stop issue from use PhoneGap on my projects.

Tom Wilson no, the defaults are still there in the template and they are both false: https://github.com/apache/cordova-ios/blob/dbd7f3d8a02d48524319383312f464a0f5e66e8c/bin/templates/project/__TESTING__/config.xml#L46-L48

For some reason I am not getting that config file pulled into my brand new 3.0 project. I get two config files and they are both missing those preference tags. When I run against IOS7, it acts like KeyboardShrinksView is set to true, when I run against IOS6, it acts like KeyboardShrinksView is set to false.

I make sure to update to the latest phonegap library and re-created the project from scratch. I was also seeing the above error in IOS 6.1+ until I put the fix in place. Could something be corrupted in my phonegap installation?

Were you able to reproduce this issue in IOS 7 where the buttons are removed, but the bar is still visible?

With the latest code from the repo, I checked that they are definitely read as false based on config.xml. From creating a project from the Cordova CLI, the two prefs are missing which mean they default as false, and I verified that as well.

Compiling with Xcode 5 (iOS 7 GM), I set both preferences to true, and the bar is not visible in a 6.1 device, but it IS visible in a iOS 7 device.

There are more views to "hide" in iOS 7:

With iOS 7, the view hierarchy is different:

<UIKBInputBackdropView: 0x156bc050; frame = (0 44; 320 216); userInteractionEnabled = NO; layer = <CALayer: 0x156bcb30>>
<UIKBInputBackdropView: 0x156c2300; frame = (0 0; 320 44); userInteractionEnabled = NO; layer = <CALayer: 0x156c2380>>
<UIKeyboardAutomatic: 0x155c42f0; frame = (0 44; 320 216); opaque = NO; layer = <CALayer: 0x155c4420>>
<UIWebFormAccessory: 0x1569e530; frame = (0 0; 320 44); layer = <CALayer: 0x1569e6d0>>

On iOS 6 (which is handled already):

<UIImageView: 0x1e8bc6e0; frame = (0 -3; 320 3); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x1e8bc740>>
<UIKeyboardAutomatic: 0x1ddd77a0; frame = (0 44; 320 216); opaque = NO; layer = <CALayer: 0x1ddd7880>>
<UIWebFormAccessory: 0x1e89c850; frame = (0 0; 320 44); layer = <CALayer: 0x1e8a3be0>>

On iOS 7, I hid the "<UIKBInputBackdropView" views, and it works if KeyboardShrinksView is false. If it is true, on the second time the keyboard comes up, there is a white area. More work to be done...

CDVViewController.m

- (void)hideKeyboardFormAccessoryBar
{
    NSArray* windows = [[UIApplication sharedApplication] windows];

    for (UIWindow* window in windows) {
        for (UIView* view in window.subviews) {
            if ([[view description] hasPrefix:@"<UIPeripheralHostView"]) {
                for (UIView* peripheralView in view.subviews) {

                    // hides the backdrop (iOS 7)
                    if ([[peripheralView description] hasPrefix:@"<UIKBInputBackdropView"]) {
                        [[peripheralView layer] setOpacity:0.0];
                    }
                    
                    // hides the accessory bar
                    if ([[peripheralView description] hasPrefix:@"<UIWebFormAccessory"]) {
                        // remove the extra scroll space for the form accessory bar
                        CGRect newFrame = self.webView.scrollView.frame;
                        newFrame.size.height += peripheralView.frame.size.height;
                        self.webView.scrollView.frame = newFrame;

                        // remove the form accessory bar
                        [peripheralView removeFromSuperview];
                    }
                    // hides the thin grey line used to adorn the bar (iOS 6)
                    if ([[peripheralView description] hasPrefix:@"<UIImageView"]) {
                        [[peripheralView layer] setOpacity:0.0];
                    }
                }
            }
        }
    }
}

Ok fixed the white area, additionally in CDVViewController.m:

- (void)keyboardWillShowOrHide:(NSNotification*)notif
{
    if (![@"true" isEqualToString :[self settingForKey:@"KeyboardShrinksView"]]) {
        return;
    }
    BOOL showEvent = [notif.name isEqualToString:UIKeyboardWillShowNotification];

    CGRect keyboardFrame = [notif.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    keyboardFrame = [self.view convertRect:keyboardFrame fromView:nil];

    CGRect newFrame = self.view.bounds;
    if (showEvent) {
        newFrame.size.height -= keyboardFrame.size.height;
        if (!(IsAtLeastiOSVersion(@"7.0"))) {
            self.webView.scrollView.contentInset = UIEdgeInsetsMake(0, 0, -keyboardFrame.size.height, 0);
        }
    } else {
        self.webView.scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    self.webView.frame = newFrame;
}

Will patch it soon. Note that with KeyboardShrinksView to true, the area where the accessorybar is supposed to be, no touches are recorded.

Commit 4b823bac4e6b03f7630cf435a9dd084933618a0a in branch refs/heads/master from Shazron Abdullah
[ https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;h=4b823ba ]

CB-3020 HideKeyboardFormAccessoryBar and KeyboardShrinksView show white bar instead of removing it

Hi Shazron!

I've done a little more testing and it seems like that iOS7 (at least on my phone) shrinks the view – even with KeyboardShrinksView set to false. In combination with HideKeyboardFormAccessoryBar set to true there's a black 44pt bar between the webview and the keyboard.

When setting KeyboardShrinksView to true I still have a plain white bar between webview and keyboard

KeyboardShrinksView = false

KeyboardShrinksView = true

For me the Shazron's solutions is working fine if the KeyboardShrinksView option is set to false. For now is far enough.

Ok, more info about that f***ing problem. xD

For me the Shazron's solutions is working fine... BUT, the section where the Toolbar of the Keyboard is supossed to be, then is not showing the content of the page.

I swear that all the troubles with the Keyboard is driving me crazy!

Horst Perfectnot sure what's going on with your setup, can you try a test with a new project and see if it occurs, to rule things out?

Miguel Angel Duran Garcianot showing? can you do a screenshot before and after. I did test with a UI element in there, and a <button> showed up fine for me.

Horst Perfect Are you using an iPhone 5 or?

Yes, it's an iphone5.

Ok, i've tested it with a new project and it's exactly the same as mentioned before, sorry!
Unfortunately i have no iphone 4 with ios7 with me to test it on this device as well.

FYI, I've noticed that if you download xcode 5 and update the project with the recommended settings, the window resize stops working.

http://imgur.com/8UbsLFL

I verified by creating a new phonegap ios project, running initially to verify everything worked, then updating project settings and re-testing. The view just never resizes.

After update, I also get a bunch of new warnings, but no fatal errors.

Having the same issues - shrinks view logic is reversed

Each time i open and close the keyboard the shrunken view shrinks by another factor of the height of the accessory bar. Seems like the value is change is globally additive so after two opening of the keyboard, the view is useless.

really unstable, yet such a critical part of our apps and precious screen real-estate.

This is all being tested in Phonegap 3, Xcode 5 on an Xcode updated project.

Both HideKeyboardFormAccessoryBar and KeyboardShrinksView aren't included in config.xml by default, I have to add them manually.

I also didn't see white bar above keyboard, but this bar is transparent. I mean I can see buttons under it but can't click them.

I was testing with PG 3.0

Hey guys - I'm using (and need) the following to work: <preference name="KeyboardShrinksView" value="false"/>.

I tried the above stuff and something a guy put here: https://github.com/cpojer/cordova-ios/commit/883ebf049bfd6a4a2b210f69b7b6bab229269eff but nothing got things working for me. By "working" I mean I DON'T want the keyboard to shrink my view when it appears ... which is what I need 99.5% of the time.

I think I have a working (hack) fix if anyone wants to try/test. All I did was comment out the first 3 lines of the keyboardWillShowOrHide method - after doing that the keyboard stopped shrinking my view - Yay! If anyone tests/confirms the same on their end please let me know.

Update 1: I had some iPad issues so I updated my hack a bit

Update 2: Looks like it works on the simulator but on the iPad itself this hack stops working after a few show/hide instances ... trying to resolve still

Update 3: Ok - after some more testing/code-mangling I think I got this hack working consistently now - on both IOS devices AND the simulator. I can't claim to know how/why really as this issue is so quirky - but at least my view isn't being shrunk by the keyboard for now!

Update 4: This is getting ridiculous I know. This hack fix now includes way to add a css class to <body> on keyboard show/hide. This is something I may/may not keep using going forward - though I suppose thing belongs in a plugin not the CDVViewController.m file ... but alas it remains in this keyboardshrinkview fix for now. I've also moved my scary hack code to a Gist here to spare this thread any unnecessary pain and suffering

https://gist.github.com/cemerson/6642026

I will stay tuned for a cleaner/actual fix for this issue ...

Dear Sir Chris Emerson

you're the one. This works perfect for me. No view shrink, no more repaint on the content and no toolbar. Almost perfect.

There's one thing still is not working properly. It's a detail but...

When you open the keyboard for the first time, the toolbar is showed for a few miliseconds. It's not a very big deal but it's perceptible. Maybe the problem is that the method is called when the keyboard is going to be showed and it takes time to do his job?

Regards,
Miguel

This hack might work, but it is the wrong way to approach it for a final solution (I'm not sure I see the problem anymore as I already stated). Perhaps its an iPad problem, I haven't tested that yet, I will. If KeyboardShrinksView is false it should never run the following code.

@Miguel - yeah I do think there's possibly a timing element to this issue and/or my hack. Not sure I'm seeing this toolbar thing yet though - my use may be diff than yours? (share screenshot?)

I hacked my fix a bit more (and moved it to a Gist) - see above if you can use and/or help make it better.

At least, it's a solution. The problem persist as I said with the previous solution, because the toolbar doesn't show, that's true but the "hidden" toolbar doesn't let to show the content. It shows like a white rectangle on it.

I'm going to provide a sample index.html, and a test project containing the 3.1.0-rc1 iOS code so we can all be on the same page. I'll put the index.html in a gist/repo for us to update as we see fit. Right now we're just not on the same page and it's hard to get confirmation and verification of issue resolution. Stay tuned.

here is a sample index.html file that I've been using for testing. It uses jquery mobile and has long lists with text boxes and fixed header and footers.

https://gist.github.com/twilly86/6642342

Alright, I've got the repo set up: https://github.com/shazron/CB-3020 with the two prefs set to true. Note this has NO core plugins.
Preferably a test case can be found that does not require any external dependencies, to rule those things out.

Please clone and add your www changes to test, send pull requests, etc. I'll start with Tom Wilson's gist, and testing Horst Perfect's code as well. Once I confirm the problem (or not), I'll report back here and try to generate a general test case.

Goes without saying also, use Xcode 5 and iOS 7 (I'll also test on iOS 6)

With Tom Wilson's gist and both prefs to true, I see the extra white) space (accessory bar background) at the end (but if KeyboardShrinksView is false, it's fine). With Horst Perfect's code (simple input type=text), it shows a separate white area (accessory bar background) when both prefs are true, and a black area (webview truncated, but no accessory bar) when HideKeyboardFormAccessoryBar=true,KeyboardShrinksView=false.

I have to leave for a couple of hours but I'll get back on this after.

Thanks Shazron for all your help. I'm not too familiar with Objective C but I'll try and help out with testing as much as possible. On the template I posted, I'm getting weird behavior when running an iphone app on the ipad when the keyboard is up. See screen shot. under the footer is a black area. The window height is 1308 when it should be 220.

http://imgur.com/pAuPfBc

IOS7, iphone app deployed to retina ipad.

Ok, I think I solved this, but there are still 2 outstanding issues on iOS 7.0. iOS 6.x seems to work ok.

See my horst branch commit: https://github.com/shazron/CB-3020/commit/07023172b28284754699f2f8bcba27b421a002f0
(download: https://github.com/shazron/CB-3020/archive/horst.zip)

The two outstanding issues are:
1. There is a brief black flash when the keyboard is shown
2. When your app supports both portrait and landscape, the web view is not resized (it is, in iOS 6.x)

As some of you have observed, in iOS 7.0, the view is always shrunk, equivalent to KeyboardShrinksView being true, so for iOS >= 7.0 this setting is set to true all the time.

I also re-arranged the notification handlers so they are ordered (on the same queue) so the form accessory bar is hidden first always, before all the other KeyboardShrinksView code.

With Tom Wilson's example however - there is still a problem. When KeyboardShrinksView is true, there is a lot of extra black area when you scroll up. This occurs on both iOS 6 and 7 - I'm not entirely sure this is expected, since it involves jQM, who knows.

Thanks Shazron. The solution you've provided works quite good for me.

cheers

I downloaded the last code Shazron checked in and added a large list to index.html and I'm still getting the black area at the bottom. I removed jquery mobile to rule this out as being the cause. HTML is pretty basic.

Updated index.html is here: https://gist.github.com/twilly86/6642342

Screen shot: http://imgur.com/ndqA9wi

ios6 and ios 7 behave the same.

Doing some reading here..
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html

It looks like you need to set scrollView.contentSize to the size of the scrollable window which would be the height of your Dom window. This should work find if your body is always 100% of the device width, but when it overflows, then it screws it up.

ex)
scrollView.contentSize=CGSizeMake(320,758); // 320 = width, 758 = height of scrollable content
self.view=scrollView;

CGRect newFrame = self.view.bounds;
self.webView.frame = newFrame; // new frame = size of frame

Does this make sense?

Every time I keep working on this keyboard accessory bar hiding hack, I feel that it really shouldn't be in the core at all. It might "work" with iOS 7, but inevitably will break with an update sometime. I'll see if I can extract it as a plugin (this way, an update will not need to rely on a Cordova update).

So, as I see it, there are two issues remaining, which I don't know if I can find an acceptable solution before 3.1 final goes out:
1. The extra black area at the bottom (on both iOS 6 and 7 - prefs both true)
2. When your app supports both portrait and landscape, the web view is not resized (it is, in iOS 6.x) (prefs both true)

I'll incorporate Tom Wilson's updated test case in a branch, and try to get a resolution for both issues. I'll try out his last suggestion as well.

It seems like IOS7 has the KeyboardShrinksView on by default and when i set KeyboardShrinksView = true, it screws things up. I think I'm going to have it so IOS6 has HideKeyboardFormAccessoryBar and KeyboardShrinksView = true and ios7 has KeyboardShrinksView = false (even though it functions like it equals true) and then just deal with the accessory bar being visible in ios7.

This seems to be the most stable solution for me at this time.

That was what I observed - like I mentioned above, I set KeyboardShrinksView to true always for iOS 7 ("As some of you have observed, in iOS 7.0, the view is always shrunk, equivalent to KeyboardShrinksView being true, so for iOS >= 7.0 this setting is set to true all the time.") so it handles all the shrinking of scroll views expected.

Hey Shazron,

What I'm trying to say is that if I hard code all KeyboardShrinksView to false in ios7 outside of config.xml, it works as if it were true in ios6. When i set KeyboardShrinksView to true in the config, then it misbehaves and shows the black bar. Not sure if ios7 has set this to some default now.

Hmm not sure I see that (perhaps the behaviour seems like it like you said). It's getting too unwieldy and unreliable. I'm proposing to the other devs to remove the two keyboard prefs from core, and put into a plugin, for 3.2.

As for the state of this in 3.1, I'll try to get something reasonable that won't break things too much for 3.1 (end of day today). On another note, what do you guys think about disabling scrolling when KeyboardShrinksView is true? That will solve the "black area" at the end thing, but not sure if it will cover most cases. Personally I would just accept this quirk (and that would be my recommendation for 3.1 release).

I'm using Iscroll4 for scrolling so my app is always at 100% height of the screen so I'd be in favor of disabling scrolling, or having an option to toggle this.

"DisableScrollingWhenKeyboardShrinksView" yikes
This will have to be in 3.2.0, not 3.1.0 (although it can be an undocumented setting for 3.1.0)

Same here please give me an option NOT to scroll the screen when the keyboard is up.

Daniel Roizman
CEO, Founder
Hiyu
gethiyu.com

BTW to solve the black area problem, I tried modifying the view dimensions up and down the hierarchy (webview, webview's parent, the window, scrollview) and combinations of them – nothing worked.

Is it possible to give us a method to customize the bar with our own
button/callbacks? If it's going to sit there, might as well make it useful.

On Tue, Sep 24, 2013 at 12:05 PM, Shazron Abdullah (JIRA)

Daniel Roizman not sure what you are asking here, we only hide the accessory bar and have no other hooks into it.

Ok, good news - I've managed to remove the "black area", but the last hurdle is now the content is compressed when the UIWebView has content that doesn't scroll, just testing a special case fix for that and it should be good to go.

Just wanted to say that you are awesome and thanks for all your help on this. I've been pulling my hair out all week trying to get our app ready for IOS7 and your fixes have really helped.

No worries

Ok, I have the final fix in the master branch: https://github.com/shazron/CB-3020
(download: https://github.com/shazron/CB-3020/archive/master.zip)

So if you wanna grab that and put your test code in the www...

I'll work to integrate this in 3.1.0

Tested on Simulator: iOS 6.1 (3.5", 4") iOS 7 (3.5", 4")
Tested on Device: iOS 6.1.4 (4") iOS 7.0 (4")

The only problem (which I deem acceptable for now) – is the vertical scroll indicator is too short when the keyboard is up. This does not prevent scrolling of the whole view however.

Found one bug :/

As you know there are 4 combinations for HideKeyboardFormAccessoryBar and KeyboardShrinksView (t/t, f/f, t/f, f/t). When (t/f) – HideKeyboardFormAccessoryBar is true and KeyboardShrinksView is false, and you have an input element pegged to the bottom of the webview (position:absolute;bottom:0px), after the keyboard is dismissed, you can't scroll to the input element anymore.

Found a fix: hideKeyboardFormAccessoryBar expands the scrollview when the keyboard shows. When it hides, it needs to shrink it.

Commit 639f9eb9c6ba303b95d1432e778775e45f3df356 in branch refs/heads/CB-3020 from Shazron Abdullah
[ https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;h=639f9eb ]

CB-3020 interim fix (HideAccBar=true,Shrink=false still buggy)

Repro only on a iOS 6.1.4 device, app compiled on iOS 7.0 (Xcode 5) deployed to it

Commit 6673f62634a6861a27d3094008107675f990d2e8 in branch refs/heads/CB-3020 from Shazron Abdullah
[ https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;h=6673f62 ]

Fixed scrollView frame problem (CB-3020)

Commit 54dc877f4a67e47fa69adf1fdeed5547a94b5dd7 in branch refs/heads/master from Shazron Abdullah
[ https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;h=54dc877 ]

CB-3020 - HideKeyboardFormAccessoryBar and KeyboardShrinksView show white bar instead of removing it

Commit 654815aacbc6a4686ede4ecd135520d0b687265f in branch refs/heads/3.1.x from Shazron Abdullah
[ https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;h=654815a ]

CB-3020 - HideKeyboardFormAccessoryBar and KeyboardShrinksView show white bar instead of removing it

The last commit is the commit going into the 3.1 release.

Hi Shazron,

Testing out the 3.1rc1 with the following setting: Hide True, Shrink False
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="false" />

on IOS6, it works as expected.
on IOS7, the view shrinks and the Accessory Bar is black.

• with various combos of true/false, none will hide the Accessory bar.
• view always shrinks, regardless of how flag is set

Does that sound right for this release?

The final fix is not in rc1, it will be in the final.

If you can't wait for 3.1.0 final, backup your 3.0.0 CDVViewController.m and paste this new code in, overwriting your current (assuming you don't have patches to it):
https://git-wip-us.apache.org/repos/asf?p=cordova-ios.git;a=blob_plain;f=CordovaLib/Classes/CDVViewController.m;h=e81f5f1377fa8eb27e674e1172504ad8c1b6eb93;hb=654815a

Just a heads-up - this functionality is removed from the core in 3.2.0 and placed into a plugin. Right now the plugin resides in the cordova-labs repo, under the plugins branch.

This plugin only works under 3.2.0. Using cordova CLI or plugman, you would use this url to install the plugin:
https://git-wip-us.apache.org/repos/asf/cordova-labs.git#plugins:keyboard

There is programmatic access to turn on/off these preferences now, and it has legacy support for the old preferences as well. The plugin, when installed, will load at startup and read the preferences off config.xml

Does this mean that with the plugin we could remove and add the keyboard options on the fly depending on what form the user is currently filling out?

So if i have a multi input form, I could show the keyboard options (next, prev, done) and if I have a number pad, I can remove these keyboard options?

@Tom Wilson - yes, I've only lightly tested turning the accessory bar on and off through the API, and it works (same for the other preferences). There is also a Keyboard.isVisible property that you can query to see if the keyboard is showing.

I've got the 3.2 setup and the plug-in running. The commands for the
plug-in seem to work, but I still get the same old results:

Keyboard.hideFormAccessoryBar(true) - gives me a black bar instead of no bar
Keyboard.shrinkView(false) - still shrinks the view

One nice thing is the Keyboard.isVisible works.

I'm attaching my copy of the classes from the project, maybe there's a
check-in/out that isn't coming through?

Also note, I'm testing on OSX, iPhone 4"-64bit simulator. I've tested all
the other ones as well actual devices with the same result.

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

Daniel, it's best if you provided a complete project .zip bundle for us to verify and run. The code definitely works - I'm thinking that you don't have the correct bits, that's all - we'll get it sorted.

Always start with a new project to remove any side effects from any other dependencies.

I found one bug, only with a certain sequence of events

1. Before opening the keyboard. call Keyboard.shrinkView(true)
2. Open the keyboard, dismiss the keyboard
3. Call Keyboard.hideFormAccessoryBar(true)
4. Scroll the main WebView to the top, note the accessory bar has a white bar there still

Tested this by attaching to the app using the Safari Debugger, and running the commands in the console.

Where can I e-mail the code to? Or conversely, if you have a project with
it working, can you post that?

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

Use the latest cordova CLI to create a project. Install from npm. See http://docs.cordova.io for instructions.

Hi Shazron,

Here's a stripped down project, all it is has is an input element. I
installed 3.1, created the project, swapped out the CDVViewController.m
with yours, and compiled.

You can see in the attached images, the first image has the accessory bar.
For the second image, I closed the keyboard and ran the command:
Keyboard.hideFormAccessoryBar(true)

Then re-opened it and you can see a black bar.

Attached is the project so you can see if you get the same results.

Hopefully you can reproduce and diagnose.

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

Hi Shazron,

Checking in to see if you tried out the test project I sent in my last
message. If you have a working example somewhere can you please point to
it?

Thank you

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

On iOS 7, I still briefly see accessories bar before it is hidden while keyboard showing up. Anyone experienced it?

On my side, if I edit the code to make it .5 opacity, it is becoming clear
to me that there is a second layer behind it that is black. So the code is
probable hiding the accessory bar, but there is some other black element
coming from the keyboard UI that is not hiding?

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

Hi All,
Great to see the work done on this. I've been through all the comments here and can't get it working perfectly. Best I can do is a blink of black/accessorybar on first launch of keyboard, and from then on it's fine.

This is really quite important for my project, so hope to get to the bottom of it.
Where is this left? A plugin is coming in 3.2 which i've tried in 3.1 but to no avail.

To me it seems like it attempts to hide the bar after it has been created but just isn't fast enough. I've even tried calling the keyboard up before I hide the splash just to remove the bar but of course the keyboard appears over the splash.

So any help would be greatly appreciated.

Many thanks
Nic

I see the black box still show up in 3.1. It looks like the frame isn't being re-sized until after the keyboard animation is complete.

Here is a post that might be related.
http://stackoverflow.com/questions/18957476/ios-7-keyboard-animation
They are mimicking the keyboard show animation and applying that same animation to re-sizing of the webview so that you don't get the black box.

With the default 3.1 code my fixed headers were also getting repositioned when the keyboard was shown and atleast adding in the basic animation prevented this.

I couldn't get the keyboard animation to work as expected but maybe someone else could?

Tom

Has anyone tried appgyver? They say the fetchnotes has added a plugin for hiding the keyboard and I'm curious if that works in ios7.

Daniel Roizman
CEO, Founder
Hiyu
gethiyu.com

I've tried AppGyver Steroids, but they seem to retain their source code as part of their IP. Do you have a link to this keyboard reference?

Thanks,
Nic

Just tried it with an AppGyver app, Fetchnotes and the bar is showing on
iOS7

Shazron, do you have a sample project that has it working?

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

I was able to track down the problem with seeing a black bar where the
accessory was!

In my meta tags, I wasn't specifying the height:

<meta name="viewport"
content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"-->

Once I added it, things are working

<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />

ShrinksView is still not working, but this is now totally manageable.

–
Daniel Roizman
Founder, Hiyu
http://gethiyu.com
604-721-2420

FWIW, I remember a problem when iOS 6 first came out, that if you specified both the width and height in the viewport meta tag, that it had problems getting the correct size upon an orientation change.

Hi All am using cordova 1.8 and facing the same issue when upgraded to xcode 5 and tested the application in ios 7! Can you give any suggestion on this?

Hi,

I'm having problem with the virtual keyboard, a white bar appeared on top of the virtual keyboard when user select any text box.

Using the following version:

iOS 7
cordova 3.3.1-0.1.2
phonegap 3.3.0-0.18.0
xCode Version 5.0 (5A1413)
using inappbrowser plugin

deployed to ipad retina/non retina

config.xml
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<preference name="HideKeyboardFormAccessoryBar" value="true" />
<preference name="KeyboardShrinksView" value="true" />

Are you using the keyboard plugin? Try it with that, if it still happens file a new issue please. Thanks.

I'm not using keyboard plugin.

here are the plugins I'm using.

<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<feature name="Notification">
<param name="ios-package" value="CDVNotification" />
</feature>
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<feature name="StatusBar">
<param name="ios-package" value="StatusBar" />
</feature>
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>

ok I will create a separate thread.

Yeah, you have to use it - we're not fixing bugs related to older Cordova versions with it built in.
See: https://github.com/apache/cordova-plugins/tree/master/keyboard

Through the CLI, you can install it by using the plugin id org.apache.cordova.keyboard

ok I have installed the keyboard plugin.

• but why is the virtual keyboard transparent? Is there a way to configure and set to non transparent?
• I can still see a white bar on top of the virtual keyboard below google footer. or is this just the css/js

I created a new bug.

https://issues.apache.org/jira/browse/CB-5842

The keyboard is transparent by default in ios7. Apple doesn't really allow you to modify the default keyboard. You could try adding a coloured div behind it once it's opened. Or building your app in an older version of xcode (4.6) to use the old keyboard.

Have you tried Keyboard.shrinkView(true); does this help the white bar?

Hi,

I tried Keyboard.shrinkView(true);, is this the same as place it in config.xml, right? Doesn't help though.

Thanks Chris Emerson. This quick fix/hack worked for us.

Wanted to share our scenario.
--------------------------------------------------------------------------------------------------------------------------------------------------
We are on 'Sencha Touch 2.0.2 + PhoneGap 2.2'. I upgraded to PhoneGap 2.9. Upgrade was easy and nothing broke luckily. Just followed PhoneGap Platform Guide.

Then applied this fix from Gist - https://gist.github.com/cemerson/6642026
I edited Config.xml for another IOS 7 related issue (Status Bar overlapping). Otherwise you can leave it as it is.

For reference

<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableLocation" value="false" /><!-- DEPRECATED -->
<preference name="EnableViewportScale" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="HideKeyboardFormAccessoryBar" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="KeyboardShrinksView" value="false" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />

Tested successfully on IPAD/IPhone 4S (iOS 5) / IPAD (iOS 7).

Replied on Sencha Forum -
http://www.sencha.com/forum/showthread.php?272088-Software-keyboard-pushes-tabbar-up

But definitely will be upgrading to Sencha 2.3/PhoneGap (Latest) in coming months to avoid more iOS 7 UI issues.
--------------------------------------------------------------------------------------------------------------------------------------------------

@Shazron Abdullah - We are having a Real serious Problem with this 'Keyboard resizing Our View Issue' still Persisting in our application. We have upgraded our Hybrid Application to Cordova 3.1. But we are still facing this KeyBoard Shrinking Issue after Building on xCode 5 for IOS7. There are lot of threads running around this issue, but I am not able to find one standard solution to Fix this issue. Could you please reply with priority as we might need to postpone our release incase if the issue is not getting fixed.

This is not a priority (no, no ETA) - although there has been work done on it, but done on the dev branch:
CB-5852
https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a

This should go out in the next plugins release.

Does that snippet from the dev branch mean this will soon no longer be an issue - i.e. It will behave as it did pre ios7?

• Chris

Hi Shazron,

When will the next plugins release that will have this fix?

Hi Shazron,
Currently what workaround should we give to get our App going for this release ? At this point we need some solution to make our App look good in IOS7 too. Also, we are currently forced to build our APP in xCode 5 in order to get approval from App Store.

Please Help.

Try adding the keyboard plugin from the dev branch:

cordova plugin add https://github.com/apache/cordova-plugins.git#dev:keyboard