Ion-nav-bar drops below ion-tabs

ionic-v1
21

Not working, look

 <ion-view hide-back-button="false" title="title">
    
    	<ion-nav-bar align-title="left" class="bar-positive">
    	    <ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
    	</ion-nav-bar>
    
    <ion-nav-buttons side="right">
    	<a class="button button-icon icon ion-home" href="#/Home"></a>
    </ion-nav-buttons>
<ion-header-bar class="bar-light bar-subheader">
  <input type="search"
    placeholder="Search..."
    ng-model="search"
    ng-focus="searchFocused = true"
    ng-blur="searchFocused = false"
    ng-change="doSearch()">
  <button ng-if="search.length"
    class="button button-icon ion-android-close input-button button-collection"
    ng-click="clearSearch()">
  </button>
</ion-header-bar>

<ion-tabs class="tabs-positive tabs-icon-only tabs-icon-top">
<ion-tab title="EventBoard" icon-on="icon ion-ios7-paper" icon-off="icon ion-ios7-paper-outline"  on-select="onTabEventsSelected()">

<ion-content class="has-header has-subheader" delegate-handle="EventsScroll">
//STUFF HERE

</ion-content>
</ion-tab>

</ion-tabs>
</ion-view>
22

The same thing works for me. :frowning:

23

@ronycohen have you found the solution ? I am having the same problem. I have tested above mentioned solution but its not working. @siddhartha can you share your working project template with just tabs and navigation bar ?

24

The same happens to me when app is set up to have a header and tabs at bottom. The lower about 50px of a content remains below tabs, and there is o way to scroll it up to a viewport.
The problem is related to class="pane" add-on which <ion-nav-view makes to an internal <ion-content
You’ve let us know that <ion-nav-view is supposed to be container for a named child state. So, in our case, there is one <ion-nav-view for @main view placeholder, and another <ion-nav-view for partial views.
Thus, when @main nav view adds class="pane" to <ion-tabs and another partial nav view adds the same class to a content, the issue happens: pane class affects on top, and bottom css properties. This is unexpected and unwilling

25

I played with CSS to define a padding-top.

26

Ok, so basically the only work around right now is to force it with css padding?

27

I found out that if you pad <ion-content> with the following, it will work:

<div class="item item-divider"></div>

This workaround allows you to see uniform spacing in the emulator and in the browser (served by “ionic serve”).

Also, “has-header” has been deprecated prior to beta13.
https://github.com/driftyco/ionic/issues/2121

28

In my case the problem was with missed <ion-view> wrapping <ion-content> in the inner placeholder AND a bug in .bar-header.item-input-inset which sets position: relative; which makes inner element with class="pane" start not from 0px, but from 44px. Physically. Logically it was described as top: 0, but because of previous element with position: relative, the actual starting point was taken as 44px
Please, consider making changes to .bar-header.item-input-inset because it seems not suitable to manage position there (we can talk about borders and background only there)