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

Height is incorrect #23

Closed
jaripekkala opened this issue Apr 5, 2019 · 3 comments
Closed

Height is incorrect #23

jaripekkala opened this issue Apr 5, 2019 · 3 comments
Projects

Comments

@jaripekkala
Copy link

https://codesandbox.io/embed/v888k169wl

The skeleton ends up being 1 pixel taller than given in props. A simple workaround is to override the skeleton element's line-height

span {
    line-height: normal !important;
}
@Manimall
Copy link

@jaripekkala
@dvtng

Hello!

height is 3 pixels greater than original -
if i have time i'll suggest a PR to solve it!

@srmagura srmagura added this to To do in Version 3 via automation Sep 29, 2021
@srmagura srmagura moved this from To do to In progress in Version 3 Oct 8, 2021
@srmagura
Copy link
Collaborator

srmagura commented Oct 9, 2021

While surprising, this is how things have to work. Here's a demonstration of the problem along with solutions. (The code for this is in Skeleton.stories.tsx).

image

@srmagura srmagura closed this as completed Oct 9, 2021
Version 3 automation moved this from In progress to Done Oct 9, 2021
srmagura added a commit that referenced this issue Oct 9, 2021
@plustra
Copy link

plustra commented Jun 3, 2023

Another way to do it is by directly altering the style:

.react-loading-skeleton {
    line-height: unset !important;
}

I use unset instead of normal because even with normal, it is still offset a couple of levels down.

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

No branches or pull requests

4 participants