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

[Robinyo]

Ionic version:
[X ] 3.x

I'm submitting a ...
[X ] bug report

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

See: https://forum.ionicframework.com/t/ion-footer-with-ion-toolbar-and-ion-buttons-not-styled-correctly/89932

Expected behaviour:
A <button> inside a <ion-buttons> (inside a toolbar in a footer) should be styled as per a <button> (inside a toolbar in a footer but) not inside an <ion-buttons>.

Steps to reproduce:
http://plnkr.co/edit/fyJdsXxKLcSM68l4dyAw?p=preview

Related code:

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

Other information:
See: https://forum.ionicframework.com/t/ion-footer-with-ion-toolbar-and-ion-buttons-not-styled-correctly/89932

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

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

[brandyscarney]

Thanks for the issue! This is actually the expected behavior. 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>

Here are all of the attributes the button takes: http://ionicframework.com/docs/api/components/button/Button/#input-properties

There are some docs on buttons in a toolbar here: http://ionicframework.com/docs/components/#toolbar-buttons

We could probably add an example or two of a solid button in a toolbar. Do you think this would be helpful? If you have any ideas for how we could better document this please let me know or create an issue on our ionic-site repository. Thank you. 🙂

[Robinyo]

Hi Brandy,

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

OK, I wasn't aware that this was the case. I needed to use an ion-buttons element in order to position buttons at the start/end of the toolbar and then noticed the styling difference.

Perhaps adding a link in the https://ionicframework.com/docs/components/#toolbar-buttons section to the http://ionicframework.com/docs/api/components/button/Button/#input-properties section might help.

Thanks.

[Robinyo]

Interestingly, start/end doesn't work correctly:

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

    <ion-buttons start>
      <button ion-button solid color="save">
        START
      </button>
    </ion-buttons>

    <ion-buttons end>
      <button ion-button solid color="save">
        END
      </button>
    </ion-buttons>

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

But, left/right does:

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

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

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

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

Steps to reproduce:
http://plnkr.co/edit/fyJdsXxKLcSM68l4dyAw?p=preview

[brandyscarney]

I can't get the plunker to work for me, could you tell me what doesn't work about it? Here's how the attributes work:

start- Positions element to the left of the content in ios mode, and directly to the right in md and wp mode.
end- Positions element to the right of the content in ios mode, and to the far right in md and wp mode.
left- Positions element to the left of all other elements.
right- Positions element to the right of all other elements.

These are documented here: http://ionicframework.com/docs/api/components/toolbar/Toolbar/#buttons-in-a-toolbar

If you are seeing start on the right side in md or wp mode this is the correct behavior.

[Robinyo]

OK thanks, I had thought that start/end and left/right were interchangeable.

[SarahSaran]

unable to use ion-button inside ion-footer tag.

[franzisk]

Same thing here, a real hell, nothing in the documentation makes sense when the screen is rendered, I've spent many hours on it and nothing seems to solve this, I just want to put two buttons in the footer, one with the "Save" and the other with the "Cancel", something as simple as that does not work on Ionic, super frustrating.

<ion-footer no-border >
  <ion-toolbar color="super-light">
    <ion-buttons left padding-left>
      <button ion-button color="danger" block (click)="global.goBack()">Close
      </button>
    </ion-buttons>
    <ion-buttons right padding-right>
      <button ion-button color="primary" block (click)="saveItem()">Save
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

I wish I could attach here the screen.

[mhartington]

@franzisk as this is a closed issue, please open a new issue if there are any problems.

https://stackblitz.com/edit/ionic-unmdy9?file=pages/home/home.html