search

naver / egjs-infinitegrid

A module used to arrange card elements including content infinitely on a grid layout.
https://naver.github.io/egjs-infinitegrid/
MIT License
2.22k stars 95 forks source link

MasonryInfiniteGrid columnSize on Svelte does not work on initial load, only on resize #458

Closed franzvezuli closed 2 years ago

franzvezuli commented 2 years ago

I have not confirmed this behavior on any other frameworks, onlysvelte.

Description

On svelte, the MasonryInfiniteGrid 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

  1. Use the official demo code: https://naver.github.io/egjs-infinitegrid/storybook/?path=/story/examples-masonryinfinitegrid--masonry-infinite-grid-template
  2. Click the Svelte tab, click Open Sandbox
  3. Note: The demo has a bug, fix App.svelte. Change for (let i = i to for (let i = 0
  4. Add columnSize={300} to the component

Notice it does not render properly on initial load:

image

  1. Resize the window, notice it corrects the render:

image

daybrush commented 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.

franzvezuli commented 2 years ago

@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?

daybrush commented 2 years ago

@franzvezuli

Test @egjs/svelte-infinitegrid@4.1.2-beta.4 (beta) version. Thank you :)

franzvezuli commented 2 years ago

@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).

nimmolo commented 2 years ago

@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?

daybrush commented 2 years ago

@nimmolo @franzvezuli

infinitegrid's new version is released. Try it again. Thank you :)

nimmolo commented 2 years ago

Thank you. Congrats on release! 🙌 I will try it and reply.

franzvezuli commented 2 years ago

@daybrush Thank you very much :-)

I have tried it, and my issue is resolved! Thank you for all your hard work!