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

md-card-actions button overlaps md-card-footer content #5486

Closed
PooperPig opened this issue Jul 3, 2017 · 2 comments · Fixed by #5583
Closed

md-card-actions button overlaps md-card-footer content #5486

PooperPig opened this issue Jul 3, 2017 · 2 comments · Fixed by #5583
Assignees
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@PooperPig
Copy link

Bug

The default styling should not allow an md-button to overlap the md-footer content

If a md-footer is added to the card-fancy-example, then the buttons in the md-card-actions overlap the footer text

What are the steps to reproduce?

https://plnkr.co/edit/Y57GHoYFIUflnWEmDEIq?p=preview

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

The default behavior of a component should not be to overlay buttons and content

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

@angular/cli: 1.0.5
node: 7.10.0
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.5
@angular/compiler-cli: 4.1.3

Is there anything else we should know?

The behavior shows itself with the existing examples by adding an md-card-footer. In my plunker I have simply added that and made one of the buttons a 'raised' button to make the issue more obvious

@julianobrasil
Copy link
Contributor

julianobrasil commented Jul 4, 2017

IrInteresting... The order of some of the elements is important. While the footer is always anchored at the bottom of the card, the actions section can move according to it's position order relative to other card tags. For example, if you want to show the actions above the content, you can do:

  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
  <md-card-content>
    <p>
      Some content
    </p>
  </md-card-content>

I haven't noticed yet that it was allowed, but aparently it is in fact allowed:

image

But the footer is always anchored at the bottom. So, if you put the md-card-footer after the md-card-actions tag, it works right. The things get messed up if you put the footer tag above the actions tag and <md-card-actions> is the last section of the card.

It looks like a bug to me too. The footer section should push the content up to make space for itself at the bottom, independently of its position among the other md-card tags, I think.

@mmalerba mmalerba added the P4 A relatively minor issue that is not relevant to core functions label Jul 5, 2017
@crisbeto crisbeto added the has pr label Jul 7, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 7, 2017
* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes angular#5486.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 12, 2017
* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes angular#5486.
jelbourn pushed a commit that referenced this issue Jul 13, 2017
* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes #5486.
jelbourn pushed a commit that referenced this issue Jul 14, 2017
* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes #5486.
@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 Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants