Header bar title issue on iOS

ionic-v1
1

Hello,

I am having an issue on iOS (both xcode emulator and device) . The title is not correctly displayed in the header-bar (screenshot on the left side).

image
App iOS.png754×1244 41.6 KB

My code is for the header-bar is :

<ion-header-bar>
        <ion-nav-bar class="bar-light">
            <ion-nav-back-button class="button-clear"></ion-nav-back-button> 
        </ion-nav-bar>
 </ion-header-bar>

Note that on Chrome / Firefox and the Android emulator + device (screenshot on the right side), everything’s perfect.

Does anyone have any idea how to fix this :blush: ?

Thanks

2

If anyone has the same problem, I solved it following these 2 steps

  1. Install the cordova status bar plugin https://github.com/apache/cordova-plugin-statusbar
  2. In the “run” method of your app, add “StatusBar.overlaysWebView(false);”
  3. Override the SASS variable $ios-statusbar-height and set it to 0px (last line of "lib/ionic/scss/_variables.scss)
3

i try this but don’t work =(

4

I have the same issue for weeks and just fixed right now. I put the following line in config.xml instead of the “run” method.

<preference name="StatusBarOverlaysWebView" value="false"/>

And then I also remove cordova-plugin-statusbar and install it again.