Sencha Title Bar Overlaps With iOS7 Toolbar

Question

There is a problem with the title bar on iOS7: the iOS7 toolbar overlaps the title bar and its buttons. The buttons are tapeable, but barely. I'm seeing this on the app I created, which is packaged as a native app using PhoneGap.

I'm sure the people at Sencha will fix it in a later version, but what's the best fix in the meantime? The so-so solution seems to be to use CSS to push the content of the title bar down.

Thanks for any more graceful solution.

Answer 1

I found the solution (hack) in this page

basically you just have to compare if the iOS version is bigger equals than 7 and if it does, increment the height of the toolbar.

Here is the code:

app.js

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('StromRechner.view.Viewport'));

    // 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;");
    }
},