Margin on top of nav-bar

tutorials
1

I everyone,

I try to lunch Ionic Seed as it on my AVD but I have an issue: there is a blank margin on top of nav-bar as you can see in this picture. Same problem if I use header-bar. Have you any idea where this problem come from ?

Thanks

David

2

Is the blue bar in your screenshot the header bar, or is a button bar? If it is a button bar, it seems the code of the template that is being used might not be wrapped in a <view title="'blabla'"> tag.

3

On my screenshot this is a nav-bar from the Ionic Seed example without any modification

<!-- 
  The nav bar that will be updated as we navigate between views
  Additional attributes set its look, nav-bar animation and icons
  Icons provided by Ionicons: http://ionicons.com/ 
-->
<nav-bar type="bar-positive" 
         animation="nav-title-slide-ios7" 
         back-button-type="button-icon" 
         back-button-icon="icon ion-arrow-left-c"></nav-bar>

<!-- 
  The views will be rendered in the <nav-view> directive below
  Templates are in the /templates folder (but you could also
  have templates inline in this html file if you'd like).
-->
<nav-view></nav-view>
4

That’s your index.html that acts as a wrapper for all template view files. Please look for the files in your /templates/ folder. Look for the one that is being loaded in your example and check to see if the code starts with a ‘view’ tag. Like so:

<view title="'Keyword'">

    <content has-header="true" has-tabs="true" padding="false" scroll="true">

      <p>Some stuff</p>

    </content>

</view>
1 Like
5

Yes it begin with that.I use this code]1 without any modification.

6

Does this happen only on Android or also in your browser?

7

Thanks for helping, @coen_warmer!