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

Fix collapsing margin issue #22

Open
ykadosh opened this issue Apr 10, 2021 · 0 comments
Open

Fix collapsing margin issue #22

ykadosh opened this issue Apr 10, 2021 · 0 comments

Comments

@ykadosh
Copy link
Collaborator

ykadosh commented Apr 10, 2021

When the content of a collapsible has margins, the height is calculated without the margin, causing a janky transition.
This is due to collapsing margins:

6.2. Collapsing margins

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

One way to fix this is by adding overflow: auto to the container, but i'm worried about unwanted scrollbars appearing in certain cases.

Another solution is adding padding: 1px to .content, to prevent the margins from collapsing.
We can then add margin: -1px to .content-wrapper to remove the 1px spacing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant