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

Wrong height #46

Closed
leolux opened this issue Jul 25, 2019 · 4 comments · Fixed by #119
Closed

Wrong height #46

leolux opened this issue Jul 25, 2019 · 4 comments · Fixed by #119
Labels
bug Something isn't working released

Comments

@leolux
Copy link

leolux commented Jul 25, 2019

The height of the rendered component is higher than the height set with :height="200"
@jsgv
Copy link

jsgv commented Jan 4, 2020

Experiencing the same.
Setting the height to same size of window window.innerHeight

@knash94
Copy link

knash94 commented Apr 7, 2020

This was an issue for me when the loader was too wide for the parent container

@LeBenLeBen LeBenLeBen added the bug Something isn't working label Jan 18, 2021
@LeBenLeBen
Copy link
Collaborator

LeBenLeBen commented Jan 19, 2021 •
edited
Loading

width and height props are used to set the SVG viewBox ratio, it does not hard code the dimensions on the element currently. I think in some cases it might be great to have different values.

My suggestion would be to get closer to what react-content-loader does:

  • Keep width and height props but without default values, apply them as width and height attributes on the root SVG element if not empty
  • Add a viewBox prop to be applied on the root SVG element, defaults to 0 0 {width} {height} like it is now (if no width or height is specified, use 400✗130).

LeBenLeBen added a commit that referenced this issue Jan 27, 2021
@LeBenLeBen
fix: comply to width & height attributes
d955e45 
fix #46
@LeBenLeBen LeBenLeBen mentioned this issue Jan 27, 2021
Merged
LeBenLeBen added a commit that referenced this issue Jan 27, 2021
@LeBenLeBen
fix: comply to width & height attributes
1a6fe75 
fix #46

BREAKING CHANGE:

`width` and `height` attributes are now applied as-is to the `svg` element, if you want the previous, responsive behavior, use only the new `viewBox` prop instead.

Before: `width="200" height="100"`
After: `viewBox="0 0 200 100"`
@egoist
Copy link
Owner

egoist commented Jan 27, 2021

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: comply to width & height attributes egoist/vue-content-loader
5 participants
@LeBenLeBen @jsgv @leolux @egoist @knash94