-
Notifications
You must be signed in to change notification settings - Fork 144
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
Wrong height, elements overflow #37
Comments
Hey @plagasul , To properly render images you need to set the height of the image's div to the height of the image itself. If not, magic grid might use the height of that div before the image loads. That said, I noticed the container does not have a gutter at the bottom. I will fix that in a PR. |
Actually... I believe that solution cannot be applied in my case... If you check the given example page, the height of the image depends on its width which is 100% of its container's width, wich is 85% of its parent's width which is dynamic (a combination of % and min + max width) and actually interacts with the number of columns as defined by Magic Grid ...so I cannot easily apply the image's height to the image container. When resizing the window, the error never seems to happen, which would be consistent with your explanation: the image is already loaded. I find it hard to wrap my head around this one, but if this is caused by MG firing before the image is loaded, can I force it to wait ? Or, any other suggestion? Thank you |
So the problem is that magic grid items are not directly the images, but a div that wraps around the image. And when the image is not loaded the wrapper may be 0 height, and so magic grid fails to calculate. In my case (which is probably common) it is not possible to set the height apriori, as it depends on the image's height, which depends on the wrapper's width, which is responsive. Unless I am missing something very simple, the only solution seems to be to intialize magic grid only when the images are already loaded. Perhaps also hiding them until the grid is intialized. I am unsure if this is a common task, but I cannot seem to find a reliable method to do so. Any help would be greatly appreciated. |
@plagasul do you know the ratio of the image before it is loaded? In my case I do, which is how I derive the height in advance e.g. get width of column, multiplied by the appropriate ratio e.g. divide by 1.77 if it was a 16:9 image. |
Thank you @ptcampbell , I'll give that a go. By now I am having an interval checking for img.complete on all grid elements. Looks dirty but seems to work, something like:
|
@plagasul — if you can avoid using intervals you should. Introducing time or the notion of a timeline normally causes pain somewhere along the line. For what it's worth, Isotope / Masonry (traditional grid based layout packages) use |
@ptcampbell Thank you for sharing your advice, much appreciated. I do actually agree with you. I searched and found imagesloaded before trying to come up with a solution of my won, but the last commit is 2 years ago and there seem to be a few long standing unresolved bugs. I thought it may not be really safe to use it, so I went for the dirty interval solution. In this particular case I believe it is relatively safe, as this is a single element that only loads on homepage. But yeah, yes, you advice stands. Thank you. |
Very nice tool, thank you.
In my case very often the container's height is wrongly calculated and items overflow.
Let me know if I can provide other information, or what to try, please.
Thank you
The text was updated successfully, but these errors were encountered: