Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Buttons on left and right in md-card-actions

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

15reactions

danielschmitzcommented, Jul 16, 2018

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>

4reactions

peluprvicommented, Jun 13, 2017

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>

Top Results From Across the Web

how to position buttons on left and right side of a scrollable div

now i have a div with scrollable content in it, i just want to place the buttons on the left and right side...

Directives > mdCard - AngularJS Material

Action buttons can be included in an <md-card-actions> element, similar to <md-dialog-actions> . You can then position buttons using layout attributes.

Buttons Alignment Policy - UX Planet

The right-aligned buttons pay off in complicated web forms with evenly distributed input fields, checkboxes, radio buttons, and other elements.

Card - Vue Material - Creative Tim

The simplest card structure has a header, content area and action buttons, defined by md-card-header , md-card-content and md-card-actions , respectively.

Hiding Buttons and Links - Simply Schedule Appointments

Hiding buttons in the booking calendar. ... 'cancel appointment' buttons on cancellation screen */ .md-card-actions.cancellation-actions { display: none; }