Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mat-card-actions has inconsistent spacing #13382

Closed
kyletanders opened this issue Oct 1, 2018 · 7 comments
Closed

mat-card-actions has inconsistent spacing #13382

kyletanders opened this issue Oct 1, 2018 · 7 comments
Assignees
Labels
area: material/card material spec Issue related to the Material Design spec https://material.io/design/ P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@kyletanders
Copy link

Bug, feature request, or proposal:

Button spacing in mat-card-actions is different between the 1st and 2nd button and the 2nd and 3rd button.
image

What is the expected behavior?

Spacing should be consistent.

What is the current behavior?

Spacing is not consistent

What are the steps to reproduce?

https://stackblitz.com/edit/angular-fjkrkb

Look at spacing between the buttons in mat-card-actions and see that they are not the same

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

Seems like a bug

@crisbeto crisbeto self-assigned this Oct 2, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 2, 2018
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Oct 2, 2018
@webmatrixxxl
Copy link

Guys what is justification for having negative margin on mat-card-actions ?

@crisbeto
Copy link
Member

crisbeto commented Oct 5, 2018

I think the reason for the negative margin is to prevent the actions' margin from overlapping with the card's padding.

vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes #13382.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 13, 2018
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 28, 2018
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 1, 2019
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 22, 2019
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
@ogiexela
Copy link

will this be fixed at any time?

@Totati
Copy link
Contributor

Totati commented Aug 28, 2019

Since the latest release selectors should be change to .mat-button-base, I had a issue as .mat-flat-button and .mat-stroked-button are absolutely ignored in .mat-card-actions and .mat-dialog-actions. The part with the dialog has been fixed, but with the card hasn't, but I can't reopen it.

crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 31, 2019
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
@crisbeto
Copy link
Member

I've updated #13390 to use .mat-button-base.

crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 22, 2020
Fixes the margin between the first action button all the other not being even. Also fixes the margin not being reset on the last button when using `align="end"`.

Fixes angular#13382.
@jelbourn jelbourn added Fixed in MDC material spec Issue related to the Material Design spec https://material.io/design/ labels Apr 15, 2021
@amysorto
Copy link
Contributor

The new MDC based card component coming soon in v15 does not have any padding between the buttons anymore so this will be not applicable anymore.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 1, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/card material spec Issue related to the Material Design spec https://material.io/design/ P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants