PDA

View Full Version : iOS 7 and Forms



Keab42
11 Sep 2013, 7:53 AM
I know this is early, but with the Gold Master of iOS 7 out, we've upgraded a sacrificial device to begin testing some apps on iOS 7.

With Sencha running in a Phonegap wrapper installed directly to the device, I'm seeing a different behaviour with the on-screen keyboard when using forms.

Yesterday when the device was on iOS 6. Selecting a form-field triggered the on-screen keyboard and it overlaid the bottom fields, and the two buttons that were set to float at the bottom of the screen. It would then move the screen to focus those fields as necessary.

In iOS 7, the onscreen keyboard seems to be shrinking the viewport, causing the buttons that I had floating at the bottom of the screen to move up to sit above the top of the keyboard, and forcing my form to be scrollable (triggering a bug I've seen mentioned elsewhere about the cursor in scrolled form fields).

Has anybody else observed this behaviour in iOS 7. Any ideas for workarounds?

JL
17 Sep 2013, 5:18 AM
Yes, I am seeing this as well and have not found a workaround to date. I will reply if I do.

Keab42
18 Sep 2013, 8:21 AM
I've done some additional testing.

This bug is only present if Compiled with the iOS 7 SDK in Xcode. If you compile with the iOS6 SDK and run the app on iOS 7 then this problem does not manifest.

I assume this means that the iOS 7 SDK handles webviews differently.

Is this worth logging as a bug or is the Sencha team likely to be on top of this?

fmoseley
19 Sep 2013, 12:09 AM
I would suggest filing a bug with a test case just to be safe.

JL
19 Sep 2013, 5:15 AM
I've done a bit more digging as well. I believe the issue is 2 fold, one being something the Cordova folks should address:

1) The iOS 7 keyboard resizes the WebView now to fit the keyboard where as before (as stated above) it seemed to only shift the location of the Webview around (it's frame or bounds) to get the form field in a visible location above the keyboard. I've toyed around with resizing the WebView and modifying it's insets to make it act more like how it does in iOS 6 (albeit never got it perfect), but still end up with a Sencha Touch scroll view issue described in #2. This issue I'm hoping the Cordova dev's will address.

2) When the keyboard is shown, the scroll view seems to be shifted upward to place the focused field in a visible location above the keyboard. When the keyboard is hidden, the scroll view is not relocated to it's original position. The web inspector actually says (as far as I can tell) that the scroll view hasn't moved, but if I change it's top or bottom properties I can get it repositioned to where it should be. It's very odd because I need to use values as if it were positioned absolutely to get it there and it's positioned relatively. There may be something else going on that I'm missing but this is so far what I've deduced.
EDIT: Looking at it a bit more, I don't think it's the scroll view, I believe it has to do with the scroller div having it's transform style modified. -webkit-transform: translate3d(0px, 0px, 0px) seems to get modified in the Y direction after the keyboard hides. Not know much about the inner workings of the scroller, this may be a direction to head.

Thanks

uksencha
19 Sep 2013, 9:35 AM
Yes we are seeing same thing with the keyboard.

In addition we are seeing the bottom two fields on a long form continually 'bouncing' or 'flickering' up and down having scrolled the form to the bottom of the screen.

We are also seeing the top of the screens being cut off by the mobile safari browser tabs sometimes.

I guess we will have to post some bug reports as well.

karsunke
27 Sep 2013, 12:38 AM
Has anyone fixed the bug already?

loclab
28 Oct 2013, 1:54 AM
I think they have fixed in Sencha Touch 2.3 as it is not reproducible in their sample apps. Please have a look.

JL
29 Oct 2013, 12:17 PM
Indeed it appears to be fixed! Thank you Sencha

cydaps
5 Nov 2013, 5:33 AM
We're having some major issues with this on the iPhone with iOS7 and Sencha Touch 2.3.0 (Cordova 3.0 project)... This is on the iOS simulator, but the exact same is true on the actual device.

Below you'll see that we open a pop-up modal form panel. It's set to 100% width and height, centred and modal, fullscreen = true.

46704

All works great with all fields until we try and edit the value and then the keyboard appears on iOS7 and boom, it's all shifted about 20 pixels left and has moved up to position the field we're editing close to the and left...

46705

Then if I start to use the "previous" arrow on the keyboard the alignment remains wrong... Just a bit of a nightmare!! Can't figure it out, I've set scrollable to true in case that was the issue. Can't really see why it's happening as the viewport has a forced margin of 25px top to fix the issue of the overlapping status bar on iOS7...

Any thoughts to how this could be resolved, perhaps it's something I'm doing with the code? It works perfectly on everything else including iOS6... We are setting Deployment Target as 5.0 to cover as wide range of devices as we can. This is a Cordova 3 / Sencha Touch 2.3.0 project.

Thanks

caballero
5 Nov 2013, 9:10 AM
Don't know if this would help, but you can get rid of the status bar and take the margin off of the viewport.

Small changes to the css can have surprising repercussions.

JL
5 Nov 2013, 9:19 AM
In response / addition to the previous comment, you can also use the StatusBar cordova plugin instead of the css margin, it allows you to setup the app so the status bar does not overlap the application, making it act like iOS6. There is one change you need to make in the CDVStatusBar.m code however that the developers are currently looking into.



I am seeing this behavior as well with no viewport meta tag at all. I resolved it (temporarily) by changing the else condition in CDVStatusBar.m’s setStatusBarOverlaysWebview method to re-initialize bounds to the webView’s bounds before manipulating it:

// re-initialize bounds to the webView’s bounds
bounds = self.webView.bounds;

CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
bounds.origin.y = statusBarFrame.size.height;
bounds.size.height -= statusBarFrame.size.height;

self.webView.frame = bounds;
[self.webView.superview addSubview:_statusBarBackgroundView];

cydaps
5 Nov 2013, 9:28 AM
In response / addition to the previous comment, you can also use the StatusBar cordova plugin instead of the css margin, it allows you to setup the app so the status bar does not overlap the application, making it act like iOS6. There is one change you need to make in the CDVStatusBar.m code however that the developers are currently looking into.



I am seeing this behavior as well with no viewport meta tag at all. I resolved it (temporarily) by changing the else condition in CDVStatusBar.m’s setStatusBarOverlaysWebview method to re-initialize bounds to the webView’s bounds before manipulating it:

// re-initialize bounds to the webView’s bounds
bounds = self.webView.bounds;

CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
bounds.origin.y = statusBarFrame.size.height;
bounds.size.height -= statusBarFrame.size.height;

self.webView.frame = bounds;
[self.webView.superview addSubview:_statusBarBackgroundView];



Thanks for this, I'm perhaps being somewhat thick, but I can't find the CDVStatusBar.m file, I've expanded everything I can in XCode5 and I'm seeing under the Cordova project all kinds of CDV*.m files, but not the CDVStatusBar.m file... It's a standard Cordova 3 project, I've added device, notifications and vibrate and that's it. Do I perhaps need to add another plugin?

Sorry, this is probably really basic novice errors, but any help hugely appreciated!

Thanks

caballero
5 Nov 2013, 9:32 AM
did you add the StatusBar cordova plugin?

cydaps
5 Nov 2013, 9:33 AM
did you add the StatusBar cordova plugin?

Ah!! That may be the issue. I didn't see any need for it as it didn't seem to relate to anything we needed, so I'll go away and add that now!!! :) DOH!!!!

cydaps
5 Nov 2013, 9:49 AM
Please don't hate me for this, but where on earth is the StatusBar plugin? It doesn't seem to be on the docs.phonegap.com/en/3.0.0/ but I've found one that appears to be for Cordova 2.9 that's on https://github.com/apache/cordova-labs/tree/plugins/statusbar but there's never any instructions as to how to install these things. I'm not an XCode user, I just have to build using sencha app build native for iPhone and Android and can run XCode to launch in the simulators so I'm a bit lost with the whole thing.

Sorry, it's so difficult if you're not an expert at all this stuff... :( I just can't afford to break anything as we've got 2 days before go-live and all this has come out of the blue with the display issues in iOS7 it seems...

Thanks again!

JL
5 Nov 2013, 11:24 AM
It's one you need to add. See this blog post: http://cordova.apache.org/news/2013/10/10/plugins-release.html

You can download it here: http://plugins.cordova.io/#/org.apache.cordova.statusbar

or you can install it using their CLI (command line interface).

Included in the plugin package should be a README with instructions on how to use it.

You have these options for the config.xml:



<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />


Don't forget to modify the source code as I posted earlier.

Hoping these updates fix the problems, good luck.

cydaps
6 Nov 2013, 8:27 AM
Hey JL!

Thanks so much for your patience, I've got the Cordova StatusBar plugin installed using CLI (so easy when you know where to look!!). It's certainly helped solve the problem we had of overlapping status bar and I've been able to remove the CSS code that I added to resolve this from within the Ext.Viewport

Sadly this didn't fix the issue with the modal window and iOS7.... I wonder if there's a way to force the old keyboard from iOS6 to be used instead. I've seen this with a few apps (they seem to be native apps) so perhaps that would help. I'm not sure why it's happening, just seems to shunt up and across to the left this 20+px and then never realigns again unless I close the modal and open it again and all's fine... Very odd.

Thank you for trying to help me JL and Caballero!

JL
6 Nov 2013, 9:09 AM
No problem. The only thing I can recommend is to build your app against the iOS 6.x SDK instead of iOS7. That is what we've had to do, we are just now building against iOS7 and going through that process. You do this by setting the appropriate "Base SDK" under Build Settings in your Xcode project settings. You'll probably need to install the older SDK, here's some help on that: http://stackoverflow.com/questions/18423896/is-it-possible-to-install-ios-6-sdk-on-xcode-5

cydaps
6 Nov 2013, 9:24 AM
No problem. The only thing I can recommend is to build your app against the iOS 6.x SDK instead of iOS7. That is what we've had to do, we are just now building against iOS7 and going through that process. You do this by setting the appropriate "Base SDK" under Build Settings in your Xcode project settings. You'll probably need to install the older SDK, here's some help on that: http://stackoverflow.com/questions/18423896/is-it-possible-to-install-ios-6-sdk-on-xcode-5

Thanks, wow this is all such a learning curve! I did have XCode 4.6.3 installed and then upgraded to OS X Mavericks and that seems to have killed off all my old SDKs... ARGH! I'm just trying to download and unearth an older SDK now. So frustrating Apple make it so difficult to use and older SLK with XCode. Thanks for pointing out so much for me. I'm sure I'll get there soon! :) Again, thanks so much for your ongoing support!

Problem... we're looking at getting this into the App Store and I've just read something about the app store won't approve older SDKs. I think we're going to have to sit it out until Sencha finds a solution. :(

cydaps
7 Nov 2013, 3:19 AM
Sencha Guys!

Was just wondering whether there's any progress with bug fixes for this. I'm getting an earful from my boss regarding this issue and because we're allowing access to the app via web as well as via app (don't ask why... just one of those things!!) it's happening in the web version as well. Kind of a relief as I thought it may be an issue only with apps deployed in the Cordova XCode project, but nope, it's real life web apps too!

If it helps I can provide Sencha with a web link and access to the app so they can see the issue. We're pretty desperate to get this resolved if we can! :)

Sencha, please touch base if you wish to view the app. We did have x-credits with yourselves but we used those all up on previous projects otherwise I'd have raised this there.

Thanks!!!

JL
7 Nov 2013, 6:42 AM
Where did you read that? I'm not sure that's accurate, we haven't had a problem and based on this technical Q&A, doesn't seem that they will likely reject it. https://developer.apple.com/library/ios/qa/qa1806/_index.html

cydaps
7 Nov 2013, 6:44 AM
Where did you read that? I'm not sure that's accurate, we haven't had a problem and based on this technical Q&A, doesn't seem that they will likely reject it. https://developer.apple.com/library/ios/qa/qa1806/_index.html

That's good news. Just something I'd read in a forum but we all know those aren't that reliable. There was something mentioned about get your apps ready for iOS7 SDK as they'll be rejecting new iOS6.1 SDK, but no doubt just people scaremongering! :)

eepgmik
3 Feb 2014, 2:18 PM
I know this thread dates from November but it's Feb and Apple has now confirmed that it won't accept submissions that aren't built on iOS 7 SDK (https://developer.apple.com/ios7/). "Starting February 1, new apps and app updates submitted to the App Store must be built with Xcode 5 and iOS 7 SDK", so reverting to iOS 6 SDK is a non-starter.

However, I want to confirm that Sencha Touch 2.3 fixes this issue.

Can anyone confirm it?

Thanks in advance.

pmahoney
26 Apr 2014, 1:12 AM
I have the same issue with forms. Did you get a resolution?