CODEWITHSUNDEEP
javascriptcssangularjsionic-framework
acloD128
acloD128

Reputation: 103

Fixed bottom bar in ionic

I want to have a fixed footer bar at the bottom of the page. When I put 

<ion-footer-bar class="bar-dark"></ion-footer-bar>

at the end of 

<ion-nav-bar class="bar-balanced">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
    Loading...
</ion-nav-view>

in my index.html it works correctly, but then I have the footer on every page. I want it only below one specific page. When adding the line in this file

<ion-view view-title="Projects">
<ion-content class="padding">
    <ion-list>
        <div>
            <h1 class="ft-size-small ft-color-base">Projects</h1>
        <div>
        <ion-item ng-repeat="project in $ctrl.projects" href="#/project/{{project.id}}">
          <div class="item-button-right">
            <h2 ng-bind="project.name"></h2>
            <button class="button button-clear">
                <i class="icon ion-ios-information-outline"></i>
            </button>
          </div>
        </ion-item>
        <div class="text-center">
            <button class="button button-clear ft-color-green">
                Create project
            </button>
        </div>
    </ion-list>
</ion-content>
<ion-footer-bar class="bar-dark"></ion-footer-bar>

It just overlaps the list view instead of the whole page. This also happens when I add it directly below ion-list. What can I do?

Edit: Add an images to show the wrong layout:

enter image description here

This is what it should look like:enter image description here

Upvotes: 0

Views: 1735

Answers (1)

Greg
Greg

Reputation: 1402

The <h1> is causing the problem:

<div>
    <h1 class="ft-size-small ft-color-base">Projects</h1>
<div>

If you put this above <ion-list> then it should be fixed

Upvotes: 1

Related Questions