wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

Update grid component height after Back-End data fully loads #42

Open Bsmoder opened 6 years ago

Bsmoder commented 6 years ago

I hope the subject line explains it,

Basically we load some data from the back-end that increases the height of a component. As a result, components right below render on top of the first component.

We have a way to change it by maybe updating the logic, however, I thought it would be a good idea to ask here as well. Maybe you have a function or something simpler to update the layout after back-end data is fully rendered.

Thank you!

Initially, the component is empty. I think the Grid renders its height according to the empty component screen shot 2018-01-10 at 6 11 16 pm 2

The data loads pushing the component down, screen shot 2018-01-10 at 6 08 12 pm

After I resize the browser, Grid rerenders and everything is placed in the right position. screen shot 2018-01-10 at 6 08 30 pm

BeatDeer commented 6 years ago

Hello I use gutterHeight:

`<StackGrid columnWidth={520} gutterHeight={70} duration={0}

{catalogs} `

and fix this problem.

I hope it's useful. 😄 🤝

Bsmoder commented 6 years ago

How can I preserve gutterHeight for other panels that do not change its height?

Bsmoder commented 6 years ago

Didn't fix, but hacked... adjusted media css min-height...

wadackel commented 6 years ago

Hi @Bsmoder, Thank you for Issues :tada:

At the time the backend data is loaded, it may be solved by using the updateLayout() method.

Ref: How to manually update layout ?

wadackel commented 6 years ago

@BeatDeer Thank you for commenting on advice instead :+1:

seonghyeonkimm commented 6 years ago

@tsuyoshiwada without updateLayout() func calls, there is no way to update Layout?

I add transform css to each image while scrolling, it scales up from the little bottom. After scaling up, I call updateLayout() but no changes happens.

Could you help me to figure this out? Thanks.