Ion-nav-bar top padding in ios7

ionic-v1
1

On ios7 there is this extra padding that appears on the nav-bar.

This only shows on ios7, so some sort of device detection is going on and triggering the extra padding with the intention for it to show below the ios status bar. How can I control this behavior? More importantly, why isn’t the status bar over it in the first place?

This could be an ionic issue, or could be a cordova issues (using appgyver steroids), but I am not sure where to look first.

Any ideas? Thanks

2 Likes
2

What does your cordova config.xml look like?

3

config.ios.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.appgyverstarter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>My App</name>
    <content src="index.html" />
    <access origin="*" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <!-- preferences copied from AppGyver - are they necessary? -->
    <preference name="AllowInlineMediaPlayback" value="false" />

    <!-- <preference name="DisallowOverscroll" value="false" /> -->
    <preference name="EnableViewportScale" value="false" />
    <preference name="HideKeyboardFormAccessoryBar" value="false" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
    <preference name="KeyboardShrinksView" value="false" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="PaginationMode" value="unpaginated"/>
    <preference name="PageLength" value="0"/>
    <preference name="PaginationBreakingMode" value="page"/>
    <preference name="GapBetweenPages" value="0"/>
</widget>

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
</widget>
4

I have the same problem and happens after upgraded to 1.0.0-beta.1!
It seems the problem is not the CSS, maybe the problem is in plugin statusbar!

My workaround was make app fullscreen!

5

This has been asked various different ways and the cause isn’t really known. Appears to be some combination that causes a race state that isn’t handled properly. To fix it, put in this in the run function of your app.js.

ionic.Platform.ready(function () {
  ionic.Platform.fullScreen(true,true);
});
1 Like
6

Try adding this to the config file

<preference name="StatusBarOverlaysWebView" value="true" />
1 Like
7

That looks like a configuration for the Status Bar plugin. If that’s the case, I’ll have to setup the plugin in the appgyver cloud build to get it to work. I’ll give it a try,

however! Something else is going on because when the app starts, the status bar is actually ‘covering’ the top part of the ion-nav-bar, but then there is a layout is happens and the page scrolls down a bit to ‘show’ the extra padding.

8

Since ionic uses platform detection via the cordova deice plugin, there are a few extra cases where some extra css is added for ios specific cases, platform grading, so on and so forth.

If the device plugin is installed (I’m assuming it is), then those extra bits of css are getting applied, such as how to deal with the over hanging status bar. If the status bar plugin isn’t installed, then it cant control the way the status bar is displayed so it will just push the header down.

Does this make any sense?

9

Ah-- ok, so the status bar plugin is required? That’s a pretty big gotcha =) I’ll go ahead and try to get that working then.
Thanks for the help, I’ll get back to the thread with further findings.

10

Try getting rid of the ion-view and moving it to its own template. Nothing should be placed inside the ion-nav-view except the nav bar.

Try this

<ion-nav-view class="slide-left-right">
  <!-- Center content -->
  <ion-nav-bar>
  </ion-nav-bar>
</ion-nav-view>

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view title="'Home'">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

For more information, check out the docs
http://ionicframework.com/docs/api/directive/ionNavView/

11

Hi Mike

I was just checking the docs (http://ionicframework.com/docs/api/directive/ionNavBar/) and the example has the ion-nav-bar above the ion-nav-view .

do you think it matters?

Cheers
Darren

12

Going full screen works, but it adds a very visible flicker on startup.

13

Good catch @darrenahunter, I’m not sure actually. The api has changed a lot recently so I’ll have to ask one of the devs

14

@mharitngton @darrenahunter It was intended to be a sibling of ion-nav-view … but if it works as a child, then good!

15

@andy well if you select the nightly api from the docs, it lists the nav-bar as a sibling
http://ionicframework.com/docs/nightly/api/directive/ionNavView/

But if you go to the stable release docs, its list a child of the nag-view
http://ionicframework.com/docs/api/directive/ionNavView/

Any ideas?

16

I’ll put it back to sibling on nightly docs. Not sure who changed that! Good catch

It shouldn’t actually work as a child of ion-nav-view, as far as I know.

EDIT: Nevermind, it is correct on nightly. Sibling.

17

Hi! I’m having similar issue. Any solution yet?

18

Don’t know why you see the flicker. On none of our devices has it done that. Are you doing it in the run portion of the app at the top?

19

thanks guys - I will treat it as a sibling - as I have already

20

@cevic see the workaround to put the app in fullscreen mode from @juliancesar and @jazzfanatic