Ionic List gets overlapped for ion-footer-bar

ionic-v1
1

So this is what I’m getting:

http://dl.dropbox.com/u/59904959/Selection_002.png

Any ideas?

The List View:

<ion-view title="Sports"  hide-back-button="true">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
    <button class="button button-icon icon ion-ios7-more" ng-click="displaySportSelectionModal()"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <ion-list style="padding-bottom:50px">
      <ion-item class="item item-avatar" 
        ng-href="#/app/leagues/{{sport.id}}" ng-repeat="sport in sports">
        <img src="http://placehold.it/50x50">
        <h2>{{sport.name}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
<div ng-include="'/templates/footerTemplate.html'"></div>

The Footer:

<ion-footer-bar align-title="left" class="bar-assertive" ng-controller="FooterController">
  <div class="tabs tabs-icon-only">
    <a class="tab-item" href="#/app/sports">
      <i class="icon ion-home"></i>
    </a>
    <a class="tab-item" ng-click="displayActionSheet()">
      <i class="icon ion-ios7-telephone"></i>
    </a>
    <a class="tab-item">
      <i class="icon ion-cash" ng-click="displayAccountModal()"></i>
    </a>
    <a class="tab-item">
      <i class="icon ion-code-download"></i>
    </a>
  </div>
</ion-footer-bar>

Thanks in advance!

1 Like
2

Another thing… Is here the right place to ask about these things? hehe

3

I think you should add: ‘has-footer=“true”’ in ion-content

but I’m not sure I understand your problem.

4

According to http://ionicframework.com/blog/ionic-framework-beta-released/ I’m not supposed to need has-footer, I added anyways and stuff kept looking the same…

So this is what’s breaking the footer:

<div ng-include="'/templates/footerTemplate.html'"></div>

If I put the footer code directly on the view instead of doing ng-include AND remove the ng-controller from the footrer, it starts working, but I’m not planning on doing that, it would require me to break DRY.

Is this a bug? or am I doing anything wrong?

5

So the issue seems to be using ng-include.

If you add the footer in the view, it will go automatically handle the adjustment.
If you decide to stick with the ng-include, you will need to add the class, has-header to your ion-content.

1 Like
6

actually on ionic content all you have to place is class=“has-footer” and you can perfectly use ng-include to add the footer from an external html file.

1 Like
7

I’m having the same issue. In my case it’s because I’m using a directive to render my <ion-footer-bar>, rather than ng-include (my footerbar is a chat <input> lent well as a directive), though I’ve experimented with ng-include and get the same results. I’ve tried every combination of has-footer='true' & class='has-footer' on ion-view & ion-content. My hunch was directive compiling order, so I tried messing with priority: -100 in my directive, as well as rendering the footer in compile & compile:pre to “beat” the header/footer/content stages, but no cigar.

The solution ended up being: add <ion-footer-bar /> to the HTML, and then swap it out or decorate it later with via the directive. Relevant commit here https://github.com/lefnire/flashdrinks/commit/e08abc5f52d5257015d30552c26848a761e2681a.