Buttons on left and right in md-card-actions

[peluprvi]

Bug, feature request, or proposal:

Proposal to create an internal element to align the butons inside a md-card-actions.

What is the expected behavior?

Cards can have buttons both on the left and right.

https://material.io/guidelines/components/cards.html#cards-actions

What is the current behavior?

Buttons can only be aligned to the left or aligned to the right.

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

82d752b

Is there anything else we should know?

[peluprvi]

It can easily be done with CSS (flex) or using fxFlex:

<md-card-actions>
  <button md-button>ACTION 1</button>
  <div fxFlex></div>
  <button md-button>ACTION 2</button>
</md-card-actions>

[MA-Maddin]

I was looking for that as well.

The solution with flex spacer item (flex: 1 1 auto;) is only working when setting align="end" in <md-card-actions>.

[peluprvi]

Confirmed on version 73aa43e

The fxFlex solution still working with @angular/flex-layout 2.0.0-beta.8

[jelbourn]

We think this is something that should just be done in user-space css.

Thank you so much.

[danielschmitz]

one button in the right

<mat-card-actions align="end">
     <button mat-button>Click me!</button>
</mat-card-actions>

first button left, second button right

<mat-card-actions align="end">
     <button mat-button>LEFT</button>
     <div fxFlex></div>
     <button mat-button>RIGHT</button>
</mat-card-actions>

[sagarjsr]

one button centre
</mat-card-content> <mat-card-actions style="text-align: center;"> <button mat-button style="background-color: aquamarine">Know More</button> </mat-card-actions>