Closed franzvezuli closed 2 years ago
@franzvezuli
Oh, I will fix it. Thank you :)
columnSize occupies the size area of the column.
If you set it to 300, please also set the css width of the item to 300.
@daybrush Thanks. Adding a width to the demo code does fix that issue.
Setting a width on the top level element in my test app did not solve it however. I think it may have something to do with SSR? I'm assuming that the demos are using Svelte native, without SSR.
I noticed that during browser resize, the library ads this in-line styles:
style="position: absolute; top: 0px; left: 917px; width: 300px;"
Or something similar.
Are there any solutions for when using Sveltkit SSR?
@franzvezuli
Test @egjs/svelte-infinitegrid@4.1.2-beta.4 (beta) version. Thank you :)
@franzvezuli
Test @egjs/svelte-infinitegrid@4.1.2-beta.4 (beta) version. Thank you :)
Thanks! Is there any fix or solution to use it with Sveltkit SSR? First render does not look OK, only corrects itself when the wind is resized (or navigating client side).
@franzvezuli Try @egjs/svelte-infinitegrid@4.2.0-beta.5 version (#464)
@daybrush It's working well for me. Do you feel close to releasing a version 4.2.0, or still in beta?
@nimmolo @franzvezuli
@egjs/infinitegrid
4.2.0@egjs/ngx-infinitegrid
4.2.0@egjs/react-infinitegrid
4.2.0@egjs/vue-infinitegrid
4.2.0@egjs/vue3-infinitegrid
4.2.0@egjs/svelte-infinitegrid
4.2.0infinitegrid's new version is released. Try it again. Thank you :)
Thank you. Congrats on release! 🙌 I will try it and reply.
@daybrush Thank you very much :-)
I have tried it, and my issue is resolved! Thank you for all your hard work!
I have not confirmed this behavior on any other frameworks, only
svelte
.Description
On
svelte
, theMasonryInfiniteGrid
does not seem to load properly upon initial render. But when resizing the window, the columns fall into place correctly.This is using
columnSize
as described here: https://naver.github.io/egjs-infinitegrid/docs/api/MasonryInfiniteGridOptions (Also unrelated, the docs seem to have duplicates,isEqualSize
for example is listed twice, along with others.)Steps to check or reproduce
Svelte
tab, clickOpen Sandbox
App.svelte
. Changefor (let i = i
tofor (let i = 0
columnSize={300}
to the componentNotice it does not render properly on initial load: