Header position issue when working with ios sim


Hi all,

I’m having some issues getting my content to line up properly within the iOS simulator. I’ve been reading around on a few topics talking about how has-header isn’t necessary anymore if you’re using ion-content, however I can’t get things to line up properly that way or by using the has-header method. What’s weird is that the content looks fine when using ionic serve and a web browser.

I’m using beta 9 and the Ionic CLI. I started with ionic start sidemenu and haven’t really changed much from the boilerplate. I’ve also tried removing the platform / ios.json file and re-building / emulating as I added the statusbar cordova plugin.

Here’s a screenshot of the problem.
Here’s a screenshot of the main template.

Would love to get this solved,



Hmm, so first thing I’m noticing is that the syntax you’re using is pretty old (>0.9.27 I believe).

Can you try to update to the newer syntax, referenced here



That seemed to do the trick. Removing the <ion-pane> and just replacing that with <ion-side-menu-content> made it work :).

Is there already an issue created to update the starter template for the sidemenu with ionic start?


Up, if you actually run sudo npm install -g ionic, you’ll get an updated ionic cli with the new commands :smile:


Cool! I must have used the beta 8 version to generate the app and just didn’t realize the updated syntax :blush:. Thanks for the help though!