Sencha Touch hasn’t been updated for iOS 7’s new fullscreen views yet. This causes the status bar to overlap your app’s content, which looks rather messy.
Luckily it’s really easy to get things working again if all your views use title bars / navigation bars.
Just drop this code into app.js (after your last Ext.Viewport.add line) to make the title bars a bit taller and push the title bar’s contents down a few pixels so that the title and any buttons up there don’t collide with the status bar’s contents:
// Adjust toolbar height when running in iOS to fit with new iOS 7 style
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
Ext.select(".x-toolbar").applyStyles("height: 62px; padding-top: 15px;");
}
Thanks for this, v useful!
Sorry, it doesn’t work to me. I’m using sencha-touch 2.3, and when I use forms and the keyboard is showed the navigation bar hides.
I putted your code in my app.js, but I don’t have this “Ext.Viewport.add” in app.js, then I putted this in the final but the result is the same…
Could you help me with this?
Thanks a lot.
Hi, I used your solution and it is working fine but as soon as I touch the top of the browser it slides down and the extra space given is visible, i.e this time app header is not overlapping and extra height given by us is visible on top of header.
@albert:
Somewhere you should have an
Ext.application({...});block, and inside there should be alaunch: function() {...}block.You want to add the
applyStylesline sometime after you add the views to the screen (usually somewhere in thatlaunchblock), the sooner the better to avoid visual jumping. If you do it before it’ll not apply as the views won’t be there, if you do it too long after the user will be able to see the before and after states (rather than just all having it happen so fast that they don’t notice).@abhishek:
I’m doing this inside a Cordova app so I don’t have the browser UI there, just a full-screen
UIWebView. If you’re doing this inside a browser you may need to do something a bit smarter to detect if the browser UI is visible at the moment or not.The following will work as a solution, try it
document.addEventListener(‘deviceready’, function () {
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
document.body.style.marginTop = “20px”;
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() – 20);
}
});
You have to change .x-toolbar -> .x-toolbar.x-docked-top because bottom panel change its size too , but we need to resize only top panel.
if (Ext.os.is.iOS && Ext.os.version.major >= 7) {
Ext.select(".x-toolbar.x-docked-top").applyStyles("height: 62px; padding-top: 15px;");
}
I have tried it but not working for me. Am building my app using Sencha CMD.
Finally i have fixed this issue by just adding a splash screen image for ios 8
If you are building app with Sencha CMD, create a png image with resolution 640X1096 rename it to Default-568h@2x put the png image in resources/loading folder. It will fix the issue.