Ion-toolbar position="bottom" not working

Ionic Framework ionic-v3
1

For the following lazout, the ionic toolbar is always on the top:

<ion-navbar primary *navbar>
      <button menuToggle>
    <ion-icon name="menu"></ion-icon>
    </button>
      <ion-title>
        <img src="images/logo.png" class="logo" />
      </ion-title>
    </ion-navbar>

    <ion-content class="chat" #chat id="chat">
      <ion-list no-lines>
        <ion-item>
          <ion-avatar item-left>
            <img src="">
          </ion-avatar>
          <h2>Name here</h2>
          <p>message here</p>
        </ion-item>
      </ion-list>
    </ion-content>

    <ion-toolbar position="bottom">
      <ion-input [(ngModel)]="chatMessage" type="text" placeholder="message..."></ion-input>
      <button (click)="sendMessage()">
        <ion-icon name="chatbubbles"></ion-icon>
      </button>
    </ion-toolbar>

what am I missing?

1 Like
2

I have exactly the same problem. I can’t fix it unless I put the toolbar in a ion-footer. Do you find a workaround?

3

Are you using Ionic 2.0.0-beta.9?
On the beta.10 the page structure got changed: