Skip to content

bug(material/card): The mat-progress-bar overflows when placed in the mat-card-footer #28785

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.

Sign up for GitHub

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

Jump to bottom
Open
1 task
AntonGorelov opened this issue Mar 27, 2024 · 1 comment · May be fixed by #28833
Open
1 task

bug(material/card): The mat-progress-bar overflows when placed in the mat-card-footer #28785

AntonGorelov opened this issue Mar 27, 2024 · 1 comment · May be fixed by #28833
Labels
area: material/card area: material/progress-bar P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@AntonGorelov
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

In the documentation example "Card with footer" (loading bar) the loader is out of bounds.

https://material.angular.io/components/card/examples#card-footer

Reproduction

StackBlitz link: https://stackblitz.com/edit/pm8knt-rswhv3?file=src%2Fexample%2Fcard-footer-example.html

Expected Behavior

Content should not extend beyond the borders of the card

Actual Behavior

when using elements such as picture, progress-bar the corners of the borders are different from the inserted content.

Environment

  • Angular: 17.3.1
  • CDK/Material: 17.3.1
  • Browser(s): Chrome 123.0.6312.59 (Official Build) (arm64)
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS Sonoma 14.4
@AntonGorelov AntonGorelov added the needs triage This issue needs to be triaged by the team label Mar 27, 2024
@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround area: material/card area: material/progress-bar and removed needs triage This issue needs to be triaged by the team labels Mar 27, 2024
@wagnermaciel wagnermaciel changed the title bug(Card): Card footer has wrong borders bug(material/card): The mat-progress-bar overflows when placed in the mat-card-footer Mar 27, 2024
lsamboretrorabbit added a commit to lsamboretrorabbit/components that referenced this issue Apr 5, 2024
@lsamboretrorabbit
fix(material/card): Adds original padding for a card footer
f0d6a2e 
The mat-progress-bar overflows when placed in the mat-card-footer.
Content should not extend beyond the borders of the card

Fixes angular#28785
lsamboretrorabbit added a commit to lsamboretrorabbit/components that referenced this issue Apr 5, 2024
@lsamboretrorabbit
fix(material/card): Adds original padding for a card footer
b1579f7 
The mat-progress-bar overflows when placed in the mat-card-footer.
Content should not extend beyond the borders of the card

Fixes angular#28785
@lsamboretrorabbit lsamboretrorabbit linked a pull request Apr 5, 2024 that will close this issue
Open
lsamboretrorabbit added a commit to lsamboretrorabbit/components that referenced this issue Apr 6, 2024
@lsamboretrorabbit
fix(material/card): Adds original padding for a card footer
d2c4e31 
The mat-progress-bar overflows when placed in the mat-card-footer.
Content should not extend beyond the borders of the card

Removed the display: flex property as it is not required for the footer component

Fixes angular#28785
@lsamboretrorabbit
Copy link
Contributor

PR completed, awaiting review #28833

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P2 The issue is important to a large percentage of users, with a workaround labels May 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/card area: material/progress-bar P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/card): Adds original padding for a card footer lsamboretrorabbit/components
4 participants
@crisbeto @AntonGorelov @wagnermaciel @lsamboretrorabbit