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


#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>

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>

<ion-button> in toolbar in footer:

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


#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>

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>


How to align buttons in toolbar to left or right?
#6

instead of using start and end, use left and right


#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>

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>


#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>


#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.