Grid Layout requires scroll to update

[quizzicalIntern]

Hello,

I am working with the react-stack-grid, and when the page loads, all of the cards in the grid are minimized within the grid until the user scrolls. Is there a method to force these to be full-sized upon first going to the page?

[wadackel]

Hi @quizzicalIntern. Thanks for Issues :smiley: Is this behavior when monitorImagesLoaded is set to true?

If you want to render first at the original size, you need to set the size of the item in the grid.
I think that it is necessary to keep the size of the image separately from the URL of the image.

The following example may be helpful.

1. px Base

<div
  style={{
    width: 200,
    height: 400,
  }}
>
  ...
</div>

2. Responsive

<div
  style={{
    width: '100%',
    height: 0,
    paddingBottom: '200%',  // => (height / width) * 100
  }}
>
  ...
</div>

[quizzicalIntern]

Hello tsuyoshiwada,

The monitorImagesLoaded being set to true helps a little bit. It fixes the first row of images so that they are the correct size in the grid, but all the other elements of the grid are still collapsed. I tried working with the size of the image separately, as you said, and although it changes the size of the images in general, the same bug still exists. Editting or specifying the size of the objects doesn't seem to affect the grid.

I am printing the objects through a list, could that be the issue?

  <StackGrid
    columnWidth={240}
    gutterHeight={7}
    gutterWidth={45}
    duration={0}
    monitorImagesLoaded={true}
    >
      {childElements}
    </StackGrid>

Thank you, -quizzicalIntern

On Sat, Jun 3, 2017 at 10:47 PM, tsuyoshi wada [email protected] wrote:

Hi @quizzicalIntern https://github.com/quizzicalintern. Thanks for Issues 😃 Is this behavior when monitorImagesLoaded is set to true?

If you want to render first at the original size, you need to set the size of the item in the grid. I think that it is necessary to keep the size of the image separately from the URL of the image.

The following example may be helpful.

1. px Base

...

2. Responsive

(height / width) * 100 }}> ...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tsuyoshiwada/react-stack-grid/issues/14#issuecomment-306018068, or mute the thread https://github.com/notifications/unsubscribe-auth/AbzRC9tbkz5osK8D5VyR6e4RVSmZyOa4ks5sAjbagaJpZM4NuqwC .

[wadackel]

Hi, Thanks for response.

StackGrid may have a bug around the size of the item .... The code you tell me does not seem to be a problem.

It is helpful if you can tell me the smallest code that can reproduce Issue, if possible.

[quizzicalIntern]

Hello,

I apologize, but I am not sure how to do that. I have only recently started working in ReactJS, so I'm not sure what to do. I know the {childElements} list is Activity cells containing data pulled from a database, but their size is variable. New entries can be of varying height. I apologize for not being more helpful.

On Mon, Jun 5, 2017 at 7:25 PM, tsuyoshi wada [email protected] wrote:

Hi, Thanks for response.

StackGrid may have a bug around the size of the item .... The code you tell me does not seem to be a problem.

It is helpful if you can tell me the smallest code that can reproduce Issue, if possible.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tsuyoshiwada/react-stack-grid/issues/14#issuecomment-306355152, or mute the thread https://github.com/notifications/unsubscribe-auth/AbzRCxBHGiDYQFfZBBrIyE4XIurJBJSMks5sBKp_gaJpZM4NuqwC .

[BeatDeer]

Hello I use gutterHeight:

<StackGrid columnWidth={520} gutterHeight={70} duration={0} > {catalogs} </StackGrid>

and fix this problem.

I hope it's useful. 😄 🤝