Ion-header-bar hides first ion-item or overlaps ion-view content

ionic-v1
1

Hi,

I am trying to create a simple ionic app to list items, add items and view them. I have this in my index.html to make the html body:

<body ng-app="myApp">
  <div ng-controller="myController">
    <ion-nav-view>
    </ion-nav-view>
  </div>
</body>

And this is what I have in my view:

<ion-view>
  <ion-header-bar class="bar-stable">
    <div class="buttons">
      <button class="button" ui-sref="addView">Add Item</button>
    </div>
    <h1 class="title">List of Items</h1>
  </ion-header-bar>

  <div class="has-header">
    <ion-list>
      <ion-item ng-repeat="item in items" ui-sref="detailView({itemId: $index})">{{ item.name }}</ion-item>
    </ion-list>
  </div>
</ion-view>

The problem is that the ion-header-bar overlaps the first ion-item, thus hiding it. I have tried adding the has-header=“true” attribute also to the div, but without any changes. Am I now missing something here?

2

Try replacing

<div class="has-header">

with

<ion-content>
3

Yeap, seems to work. Thanks!

1 Like
4

And also if you include tabs below header, add has-subheader class to the ion-content. Everybody is having trouble with this.

5

Hi, in my case it doesn`t work, the header-bar is not visible, I tried also with “ion-content class=“has-header””

<ion-view view-title="Medi-Timer">
    <ion-header-bar class="bar-energized">
        <h1 class="title">Medikamenten Liste</h1>
        <div class="button">
            <button class="button icon ion-plus" ng-click="goAddMedi()"></button>
        </div>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="medi in medis" href="#/app/medis/{{medi.id}}">
                {{medi.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>
6

Are you using an ion-nav-bar in your application?

7

Yes, I do:

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
  <ion-nav-buttons side="left larger">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
    </button>
  </ion-nav-buttons>
</ion-nav-bar>
8

So if you want to replace the ion-nav-bar on that one view you need to override it with another ion-nav-bar, not an ion-header-bar. If you are trying to add a subheader to that view you need to give the ion-header-bar the bar-subheader class. See this codepen for a subheader example: http://codepen.io/brandyshea/pen/aOYWOZ?editors=101

1 Like
9

My intention was the second one. Your solution works great! Thanks :grinning:

<ion-view view-title="Medi-Timer">
    <ion-header-bar align-title="left" class="bar-subheader bar-energized">
        <h1 class="title">Medikamenten Liste</h1>
        <div class="button">
            <button class="button icon ion-plus" ng-click="goAddMedi()"></button>
        </div>
    </ion-header-bar>
    <ion-content>
        <ion-list>
            <ion-item ng-repeat="medi in medis" href="#/app/medis/{{medi.id}}">
                {{medi.name}}
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>
1 Like
10

Hi,

  I am also facing same problem. I have added  <ion-content class="has-header">

but still my header bar hides item.

here is my code :

Header Buttons

Edit
Units 
                  <ion-radio-buttons ng-model="settings.tempUnits">
                      <button class="button button-positive button-radio" ng-value="'f'">&deg;F</button>
                      <button class="button button-positive button-radio" ng-value="'c'">&deg;C</button>
                  </ion-radio-buttons>
              </label>
          </div>
        </div>
    </ion-content>

Thanks