iPhone header overlap & minor issues

Hey guys.
How can I fix these issues?
I’m using “ionic serve” to host the app and test it.

I’ve come across the header overlap issue when developing for iOS. There is a plugin that you can install that corrects this issue: http://devgirl.org/2014/07/31/phonegap-developers-guid/.

For the select not being centered, I am unsure of how to correct that. It isn’t an issue I’ve run into yet fortunately.

Good luck!

1 Like

Nice but according to the text:
Some UI frameworks like Ionic actually do this for you. They use the Cordova Device plugin (installed automatically when you create a new ionic project with the CLI) to detect the platform details and will apply different CSS classes to the navigation bars and other UI objects to handle things based on platform and OS versions.

I don’t think it’s actually working. I already have device plugin installed. Am I doing something wrong?

Interesting, I didn’t catch that part.
I didn’t install Ionic using the CLI so I’m sure I missed out on a lot of things (I just downloaded the JS/CSS files).

I am instead building my app in Adobe Edge Code (Creative Cloud Beta App), live testing it in Chrome and using PhoneGap Build to package my application for mobile testing - I’ve been testing on an iPhone, iPad, and Galaxy S3. I ran into the same problem you are experiencing with the iPad and iPhone.

What I did to solve the problem was to add this snippet to my config.xml:

<gap:plugin name="de.appplant.cordova.plugin.hidden-statusbar-overlay" version="1.2.0" />

You can find the actual plugin page here with a link to github: https://build.phonegap.com/plugins/641.

I’m sure there are many other solutions to this problem, this was just what I came across first and had success with.

Hi, you can also use the Status Bar plugin via ngCordova for a more Angular way of doing things http://ngcordova.com/docs/#Statusbar

The $cordovaStatusbar.overlaysWebView(false); should stop the overlap

Soo out of the box, Ionic will take care of this issue by adding a 20px padding to the header bar and it’s contents.

Any chance you could provide a sample of what you have?
Does this happen when you actually compile and run on a device?

1 Like

Ionic does not seem to be taking care on its own.
And yes, the same issues are also happening when I build and run on device.
This is what I did:

  • I created a Ionic project via cmd and copied “www” folder content to a Visual Studio Apache Cordova Multi-Device Hybrid App project
  • Then installed Ionic v1.0.0.0-beta.1plugin via NuGet

This is my config.xml file:

This is my project structure:

In app.js file, I have:

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required

Ahh and theres the issue. Soo in just copying over the www folder, you miss the cordova plugins directory, which is needed. You should create a project from the CLI and use that directory as the basis. Or at least install the newer version of ionic, beta 13, and the plugins that come with it.

The cordova device plugin, the ionic keyboard plugin, and the console plugin (for dev-testing)

The plugins are installed, as you can see in config.xml

Visual Studio places them inside bld folder in plugins and at build time the files will be placed back into /www behind the scenes

Hmm, I honestly don’t use Visual Studio so I’m not much of an authority on it.
Any chance you could try it with just a the default setup from the CLI?
Also, can you get a newer version of ionic? Beta 1 is very old and things might have changed

Bingo! Microsoft NuGet has update Ionic with the latest version and I did not know about it.
I updated and imported to my project and everything is working like a charm now!! Thanks very much!

1 Like