Sencha Touch 2 textfield's focus issue in iOS 7 - iphone

I'm having an issue with textfields in Sencha Touch 2, this is only occurring in iOS 7 and working fine in iOS 6 and Android.
The issue is when you tap a field the keypad opens but the cursor disappears, it should be focus on selected textfield but it does not. You have to tap the textfield again to focus.
I have checked this issue on iOS 6 and android (on devices as well as on simulators), working fine but not on iOS 7 only.
Is anybody having this issue...?
Is this a bug in sencha or should i missing something, please advice.
Thank you..

I have found this to be directly related to two things:
centered: true
pack: 'center'
When I removed those lines, my app started playing nice. The challenge is to find an alternative way to center your panels.

I spent days figuring this out. Actually there is a problem with Sencha understanding the ViewPort height. In your index.html add a script block with the following code
if (window.device && parseFloat(window.device.version) == 7.0) {
document.body.style.paddingTop = "20px";
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}
This does two things for you
It Provides enough space on Top to display the activity bar
It sets the Viewport height to be that of screen height, irrespective of the keyboard being present or not.
Also, If your app works in Portrait and Landscape mode, you will need to add these lines in your Viewport.js (or Main.js)
initialize: function(){
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 0 });
},
handleOrientationChange: function(){
try{
if (parseFloat(window.device.version) == 7.0) {
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}else{
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight());
}
}catch(e){
// do nothing
}
},
And Yes, Make sure they Keyboard Bounce is TRUE in true (if you are using cordova). This will make sure your field does not get hidden.
Hope this works for you.

add height="device-height" in viewport meta tag, fixes the issue.
ios7 issues with webview focus when using keyboard html

Related

Restarting carousel event paused on iPad and iPhones

I recently worked out a solution to another problem involving carousels on another post, but I found one issue when it comes to restarting the auto transitions from panel to the next on iPhones and iPads. (They won't restart.)
Here's a link to my original post and solution: Vanilla JS carousel next/prev button killing mouseover event pause
Here's a link to a JSFiddle containing my solution: https://jsfiddle.net/npzu90do/
After posting that solution I found that everything worked as it should accept the auto transition from one panel to the next stopped if you ever clicked the 'Prev' and 'Next' buttons on the sides. So I added this code to help restart the auto panel movement if you clicked outside the carousel.
document.getElementsByTagName("body").onclick = function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
}
Which works perfectly on all browsers except if you are on an iPad or iPhone.
I tried adding the following but that stopped the carousel from auto-starting due to errors in all browsers.
let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
document.getElementsByTagName("body").addEventListener(touchEvent, function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
});
Any suggestions?

iPhone 5 splashscreen not displaying correctly - Phonegap

I'm updating my PhoneGap iOS-app to make it compatible with the iPhone 5.
I'm manually hiding the splash screen after my app has initialized.
When simulating iPhone 5: When the app starts it displays the correct splash screen (Default-568h#2x.png) (hereon "the 5") but quickly hides it and instead displays the iPhone 4 splash screen (hereon "the 4"). The 4 doesn't cover the whole app, thus showing top and bottom bars of the app initializing.
I'm not entirely sure how it works but I can think of two possible scenarios:
1) Both images are displayed simultaneously but for some reason the 5 auto hides while the 4 waits for the call from the app to hide.
2) At some point when disabling manually hiding the splash screen phonegap switches out the "true" splashscreen for a "fake" one that is displayed until the javascript call from the app and phonegap just might not display correct one after this switcheroo.
Has anyone else encountered and / or solved this?
UPDATE:
Tried removing and adding all splash images again but to no avail. I tried removing the smaller images (the 4 and its non-retina version) but even without the smaller ones present anywhere in the project I get the same error!
UPDATE 2:
Cordova 2.2.0 has now been released, thus fixing this issue according to: http://shazronatadobe.wordpress.com/2012/10/27/whats-new-in-cordova-ios-2-2-0/
So, the recommended solution would therefore be to update your app to use Cordova 2.2.0, if that is for some reason not possible, solutions are provided below.
I've received two answers elsewhere but haven't had time to test them out yet:
From user T123 in the Phonegap Google Group:
open CDVViewController.m -- find - (void) showSplashScreen
change about line: 690
From :
else // not iPad
{
orientedLaunchImageFile = launchImageFile;
}
To:
else // not iPad
{
orientedLaunchImageFile = launchImageFile;
/* Edited for 4-inch IP5 */
if(screenBounds.size.height == 568)
orientedLaunchImageFile = [NSString stringWithFormat:#"%#-568h", launchImageFile];
}
And from Brion who commented above, the following pull request, hoepfully to be incorporated into Cordova 2.2.0: https://github.com/apache/incubator-cordova-ios/pull/50
EDIT: Tried T123's solution and it's working for me!
EDIT2: Brion's fix was incorporated in Cordova 2.2.0 which has now been released!
EDIT3: Just updating to highlight a comment for those who don't bother reading them:
For Phonegap version 1.4.1, I managed to get Hessius's fix to work like this: I copied the methods showSplashScreen, isIPad, resolveImageResource and the definition #define degreesToRadian(x) (M_PI * (x) / 180.0) from the file PGViewController.m to my MainViewController.m file. After that, XCode complained that I was assigning values to read-only attributes, so I edited the header file in PhoneGap.framework to make those two attributes readwrite. I also changed launchImageFilefrom Hessius's code to #"Default". This did the trick for me. – Joe Dyndale Oct 8 '12 at 15:23
The fix for this (https://issues.apache.org/jira/browse/CB-1482) is not out until 2.2. It is very risky to use the unstable version and I don't bother to compile from source code myself, so I tried the following hack:
In MainViewController.m
- (void) showSplashScreen
{
CGRect screenBounds = [[UIScreen mainScreen] bounds];
// HACK: PhoneGap pre-2.2 does not support iphone5 splash image well, so we just skip it
if (screenBounds.size.height == 568) {
return;
}
[super showSplashScreen];
}
This will disable showSplashScreen for iPhone5 to avoid the shorter launch image added by PhoneGap (iOS initial launch image is showing up fine). It worked for me and I barely notice any difference by hacking off showSplashScreen for iPhone5.
White Flicker
I was having this same problem with Cordova 2.2. I think it is worth mentioning that I had to take an added step in order to get the splash screen to render correctly.
I made the changes that were included in #Hessius answer. But I noticed that a white screen flash was produced after the splash screen appeared.
In the (void)showSplashScreen method others may see
if (launchImageFile == nil) { // fallback if no launch image was specified
// if (CDV_IsIPhone5()) {
// // iPhone 5 or iPod Touch 6th-gen
// launchImageFile = #"Default-568h";
// } else {
launchImageFile = #"Default";
// }
}
Commenting the code out(or removing) that I have commented, eliminated the white flicker I was seeing in between app load and launch screen.
Hope this helps someone!

i have an issue with iScroll4 when I change the orienatation from portrait to landscape on iPhone

I have an issue with iScroll4 when I change the orienatation from portrait to landscape. It is working on AppMobi XDK, but on iPhone, it is not rendering properly. I have tried to trap the orientationchange event and called the refresh method of iScroll with different timeout values, but no luck.
please use jq.scroller.js from the link:
https://github.com/appMobi/jQ.Mobi/tree/master/plugins
It is easy to use with like this:
var options={
verticalScroll:true, //vertical scrolling
horizontalScroll:false, //horizontal scrolling
scrollBars:true //display scrollbars
vScrollCSS : "scrollBarV", //CSS class for veritcal scrollbar
hScrollCSS : "scrollBarH", //CSS class for horizontal scrollbar
refresh:true, //Adds 'Pull to refresh' at the top
refreshFunction:updateMessage //callback function to execute on pull to refresh
}
var scroller = $("#my_div").scroller(options);
Replace #my_div with your Div ID.It will work perfectly.
Thanks
This is a bug with iScroll. I'm a developer at appMobi, and lead developer of jqMobi and our scrolling library does not have this problem.

Make/detect the iPhone/iPad post back on double tap

In an asp.net web application - without writing a mobile specific site, is there anyway of stopping double tapping on an iPhone, from zooming? The default behaviour should be to produce a postback (and is on my Android, and in normal web browsers) - but the iPhone appears to take this as a zoom command.
So my query is, how do I get the iPhone/iPad to recognise that I actually want to do a postback?
Thanks for any help,
Mark
if anyone is interested, my specific issue was, I had a popup on each cell of a grid (onmouseover...) - however, to start the postback, you have to actually click on a cell in the the grid, rather than hover over it. However, "hovering" on an iPhone is basically "clicking" on everything else - so when people were clicking, all that was happening, was the popup was showing again, and no postback was carried out - meaning people could not progress.
Solution was to detect for iPhone/Pad/Touch, and not output the "onmouseover" if those devices were detected - then the underlying click was available, and would do as designed.
Code to check for iPhone etc:
Dim iphone as Boolean = False
Dim userAgent = HttpContext.Current.Request.UserAgent.ToLower()
' iPhone is there
If userAgent.Contains("iphone") Then
iphone = True
ElseIf userAgent.Contains("ipad") Then
iphone = True
ElseIf userAgent.Contains("itouch") Then
iphone = True
End If
Hope this helps anyone else with this specific issue,

iphone detect new style sheet

I am trying to trouble shoot a css issue that is appearing only in iphone browsers. I simply need to detect if the user is using an iphone, and if so, render a modified version of the div that is being affected.
I am happy to just call this modified version of the css div in the header as it will save having a second style sheet.
You used to be able to do it between browsers. It was especially good when rendering a IE6 fix.
Thanks for your help in advanced.
James
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
// do something
}