Components: Buttons on left and right in md-card-actions

Created on 13 Jun 2017 · 7Comments · Source: angular/components

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?

https://github.com/angular/material2/commit/82d752b59e30a8a0f492a10f488464be784aba72

Is there anything else we should know?

Source

peluprvi

Most helpful comment

one button in the right
```

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>

danielschmitz on 17 Apr 2018

👍15

All 7 comments

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>

peluprvi on 13 Jun 2017

👍4

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

MA-Maddin on 14 Jun 2017

👍3

Confirmed on version https://github.com/angular/material2/commit/73aa43e98b8bf2782daf59bb7e7d12fa6a1b5604

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

peluprvi on 14 Jun 2017

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

jelbourn on 15 Jun 2017

Thank you so much.

curt953 on 30 Mar 2018

one button in the right
```

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>

danielschmitz on 17 Apr 2018

👍15

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>