Ion-footer not styling correctly...?

Ionic Framework ionic-v3
1

So first post here…new to Ionic and Ionic 2, please be gentle :slight_smile:

I’m trying to put a footer at one of my pages. The page already contains a menu nav bar at the top. And I’m suspecting this to be the culprit…
The contents of the toolbar shows and its sticks to the bottom correctly. But it is not styled as a toolbar / footer - whats wrong?

The markup for the page:

<ion-header>
  <ion-navbar>
     <button menuToggle>
        <ion-icon name="menu"></ion-icon>
     </button>
    <ion-title>Todays Events</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    Hello Today!
</ion-content>

<ion-footer>
    <p>Ash, Misty, Brock</p>
    <ion-buttons end>
        <button royal>
            Send
            <ion-icon name="send"></ion-icon>
        </button>
    </ion-buttons>
</ion-footer>

The result:

image
2016-08-12_11-11-02.png320×502 27.2 KB

2

Hmmm I think I solved it. But not sure the documentation about this is correct:

“To use a toolbar as a footer you can use ion-footer instead of ion-toolbar.”

Sample markup from docs:

<ion-toolbar>
  <ion-title>Toolbar</ion-title>
</ion-toolbar>

<ion-content></ion-content>

<ion-footer>
  <ion-title>Footer</ion-title>
</ion-footer>

Which to me reads as no toolbar markup needed in footer, cause the footer will take care of that.

But by adding a ion-toolbar inside my ion-footer I got the desired result:

<ion-header>
  <ion-navbar>
     <button menuToggle>
        <ion-icon name="menu"></ion-icon>
     </button>
    <ion-title>Todays Events</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    Hello Today!
</ion-content>

<ion-footer>
    <ion-toolbar>
        <p>Ash, Misty, Brock</p>
        <ion-buttons end>
            <button royal>
                Send
                <ion-icon name="send"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

and now it displays correctly:

image
2016-08-12_11-25-45.png320×502 26.9 KB

Either thats a bug or its docs who are wrong :slight_smile:

3

Maybe open an issue about it?

4

done :slight_smile:

5

It was a documentation issue. The problem has been fixed, docs have been updated: