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.

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

mat-stroked-button with matBadge is cropped #13909

Closed
tjaussoin-luna opened this issue Oct 31, 2018 · 4 comments · Fixed by #13912
Closed

mat-stroked-button with matBadge is cropped #13909

tjaussoin-luna opened this issue Oct 31, 2018 · 4 comments · Fixed by #13912
Assignees
@devversion
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@tjaussoin-luna
Copy link

Bug, feature request, or proposal:

On a mat-stroked-button with a matBadge, the badge is cropped.

What is the expected behavior?

matBadge not cropped, like it is on a mat-button.

What is the current behavior?

matbadge is cropped.

What are the steps to reproduce?

Change the mat-raised-button to a mat-stroked-button here :
https://stackblitz.com/angular/gxraooqgqod?file=app%2Fbadge-overview-example.html

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

Angular 7
Angular Material 7.0.2
Browser: Chrome
@devversion
Copy link
Member

Good catch. This is caused by 4cdf5ba.

We should consider removing the overflow: hidden again, and just expanding the overlays by the amount of pixels the border takes up.

This is how it would be if we just remove the overflow and specify a border-radius for the underlying ripple container, and focus overlay.

image

@devversion
Copy link
Member

devversion commented Oct 31, 2018 •
edited
Loading

As mentioned above, we could technically expand the focus-overlay and ripple container by the width of the border, in order to make sure that the border-radius on those two child elements match the border radius of the actual button HTML element. This way we could remove the overflow: hidden.

image

The trade-off here would be just that it won't work properly if someone changes the border-width of the stroked button. Any thoughts @crisbeto?

@crisbeto
Copy link
Member

It should be fine, as long as we put the border width in a variable.

@devversion devversion self-assigned this Oct 31, 2018
@devversion devversion added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Oct 31, 2018
devversion added a commit to devversion/material2 that referenced this issue Oct 31, 2018
@devversion
fix(button): stroked button crops applied badges
368e60d 
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep angular#13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes angular#13909
devversion added a commit to devversion/material2 that referenced this issue Oct 31, 2018
@devversion
fix(button): stroked button crops applied badges
56fce6e 
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep angular#13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes angular#13909
@devversion devversion mentioned this issue Oct 31, 2018
Merged
jelbourn pushed a commit that referenced this issue Nov 1, 2018
@devversion @jelbourn
fix(button): stroked button crops applied badges (#13912)
4b431fe 
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep #13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes #13909
atscott pushed a commit to atscott/components that referenced this issue Nov 5, 2018
@devversion @atscott
fix(button): stroked button crops applied badges (angular#13912)
360a47e 
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep angular#13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes angular#13909
jelbourn pushed a commit that referenced this issue Nov 6, 2018
@devversion @jelbourn
fix(button): stroked button crops applied badges (#13912)
835dc9e 
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep #13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes #13909
@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 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
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(button): stroked button crops applied badges devversion/material2
3 participants
@crisbeto @tjaussoin-luna @devversion