AvatarGroup negative margin breaks design
See original GitHub issueHere’s a demo of the problem.
The Problem
In AvatarGroup
, each constituent Avatar
has margin-left: -12px
, which breaks their composition into any box model.
The Solution
Only apply the negative margin to every Avatar
after the first one.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:4
- Comments:23 (19 by maintainers)
Top Results From Across the Web
The Definitive Guide to Using Negative Margins
The use of negative margins in web design is so divided that while some of ... It does not break the flow of...
Read more >Breaking changes in v5, part two: core components - Material UI
This is a reference guide to all of the breaking changes introduced in ... in Material UI v5.9.1 and features negative margins on...
Read more >Grid with negative margin (top) break my UI - Stack Overflow
The spacing attribute sets the spacing between the Grid items inside the Grid container , but not between the item and contaianer sides....
Read more >Negative Margins - CSS-Tricks
This is by far the most common use case for negative margins. You give a container a padding so that its contents have...
Read more >Slds Button
Creating a Modal Dialog box using Lightning Design System. ... the contrast for focus and hover states on links and buttons in alerts;...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@DillionM, you have all the permission to not understand and that is totally fine!
To explain a bit,
this is an issue. It’s a place where we (the community) list stuff that we need to work on in the project. Think of it as a “to do list”.
when someone (in this case @mehtavishwa30) chooses to work on it, they fix the issue and open a pull request. They kind of look like this and allow us to see what’s being added/removed from the project and review it to make sure we’re all on the same page.
if we approve it, then @mehtavishwa30’s work becomes part of this project and the issue gets resolved (we check the item of the to do list) and continue to create better software together.
Does that clarify things a bit? Or was your question more about this specific issue?
Permit me to say I don’t understand what’s going on here… I’m a GitHub newbie ☹️