question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AvatarGroup negative margin breaks design

See original GitHub issue

Here’s a demo of the problem.

image

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:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:23 (19 by maintainers)

github_iconTop GitHub Comments

2reactions
TejasQcommented, Jun 23, 2019

@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?

2reactions
dillionmegidacommented, Jun 23, 2019

Permit me to say I don’t understand what’s going on here… I’m a GitHub newbie ☹️

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found