Ionic ion-view header behind ios status bar

Question

How do I avoid ionic header from getting behind ios status bar like this?

I created the header with following code:

Answer 1

From: http://www.sitepoint.com/5-ionic-app-development-tips-tricks/

Ionic has specific classes to deal with this – platform-ios and platform-cordova. Ionic’s pre-built elements target those classes and add in 20px top margin to the buttons in your header to make up for these situations. To get my own custom elements to do the same, I follow the same pattern. For my .search-bar above, I add a margin if we’ve got a .platform-ios.platform-cordova:not(.fullscreen) body class. Example:

.platform-ios.platform-cordova:not(.fullscreen) .search-bar {
     margin-top: 20px;
}

This should be the correct answer.