Ion-footer with ion-toolbar and ion-buttons not styled correctly

Ionic Framework ionic-v3
1

When I place a <button> inside a <ion-buttons> (inside a toolbar in a footer) it is not styled correctly:

<ion-header>
  <ion-toolbar>
    <h1 class="post-title">Your Post Title</h1>
  </ion-toolbar>
</ion-header>

<ion-content class="page-editor">
Your post content...
</ion-content>

<ion-footer>
  <ion-toolbar color="secondary">

    <button ion-button color="save">
      SAVE DRAFT
    </button>

    <ion-buttons end>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>
    
  </ion-toolbar>
</ion-footer>

image

ionic info, returns:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.10.3
Xcode version: Not installed
2

I believe that button is how it’s supposed to be styled when it’s in an header, or ion-buttons, element.

Buttons aren’t traditionally styled like normal when they’re in toolbars from what I’ve seen.

3

You can just ignore ion-toolbar if you want the styled button in footer.

4

<ion-button> in footer:

<ion-footer>
  <button ion-button color="save">
    SAVE DRAFT
  </button>
</ion-footer>

image

<ion-button> in toolbar in footer:

<ion-footer>
  <ion-toolbar>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
  </ion-toolbar>
</ion-footer>

image

5

With a toolbar:

<ion-footer>
  <ion-toolbar>

    <ion-buttons start>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>

image

Without a toolbar:

<ion-footer>

  <ion-buttons start>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
  </ion-buttons>

  <ion-buttons end>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
  </ion-buttons>

</ion-footer>

image

6

instead of using start and end, use left and right

2 Likes
7

With a toolbar (left and right):

<ion-footer>
  <ion-toolbar>

    <ion-buttons left>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>

    <ion-buttons right>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
      <button ion-button color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>

image

Without a toolbar (left and right):

<ion-footer>

  <ion-buttons left>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
  </ion-buttons>

  <ion-buttons right>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
    <button ion-button color="save">
      SAVE DRAFT
    </button>
  </ion-buttons>

</ion-footer>

image

8

See: https://github.com/driftyco/ionic/issues/11638

9

Issue resolved :slight_smile:

By default, buttons inside of a toolbar should be inside of an ion-buttons element and they should take on the style of a clear button. You can change the button to have the look of a button outside of a toolbar by adding the solid attribute:

<ion-footer>
  <ion-toolbar color="secondary">
    <ion-buttons end>
      <button ion-button solid color="save">
        SAVE DRAFT
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

This worked for me:

<ion-header>
  <ion-toolbar>
    <h1 class="post-title">Your Post Title</h1>
  </ion-toolbar>
</ion-header>

<ion-content class="page-editor">
Your post content...
</ion-content>

<ion-footer>
  <ion-toolbar color="secondary">

    <ion-buttons left>
      <button ion-button solid color="save">
        LEFT
      </button>
    </ion-buttons>

    <ion-buttons right>
      <button ion-button solid color="save">
        RIGHT
      </button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>

image

1 Like
10

Did you only try with ionic serve, or there are actual captures from Android and iOs? I say that because the render is often different from a browser view.