Horizontally fill container

[danerwilliams]

Expected behaviour

On the docs site, images responsively fill the horizontal width of the container. See below:

https://user-images.githubusercontent.com/22798229/212762981-27dc4566-cefe-4fee-9b64-42d439730f63.mp4

It's unclear to me how to use this library in such a way that achieves this effect in the docs.

Actual behaviour

In the code sandbox for this example, however, it does not behave the same way:

https://user-images.githubusercontent.com/22798229/212763068-db611344-a660-479a-a415-be59525db76d.mp4

Steps to reproduce behaviour

Use the docs and code sandbox

Operating system

Mac OS

Browser and version

Arc v0.85.0

Hardware

[itoldya]

Hi Dane.

The gallery should always be responsive. We are using ResizeListener to adjust the gallery after the size changes.

In my case in the latest Chrome on Mac OS, both examples from docs and code sandbox work well.

The main difference between the docs variant against code sandbox is that the sandbox is rendering the content in iframe.

I guess that could be something related to the Arc browser. I joined to waitlist to get this browser as soon as I get access to it I'll try to debug this behavior.

[appinteractive]

Same issue here, does not resize either in chrome, nor in firefox. On initial load its fine though.

[appinteractive]

@itoldya I have to pass the window width as a key parameter to get the component to rerender, thats really not optimal.

[nokynokes]

Running into this issue as well, I found a work around that involes the following css:

.ReactGridGallery_tile {
  flex-grow: 1;
}

and setting the width for the tile-viewport to be 100% and a fixed height

[1cedsoda]

Same problem in Arc and Safari

[Dparmar006]

Facing the same issue, Do you guys think running the same on "onload" event would work?

EDIT :

useLayoutEffect(() => { const obj = objectRef.current if (obj && obj.contentDocument && obj.contentDocument.defaultView) { _onResize() } }, [objectRef.current])

I added in this in ResizeListener.tsx and it worked, I am not sure if it's the optimal solution.

[Dparmar006]

Facing the same issue, Do you guys think running the same on "onload" event would work?

EDIT :

useLayoutEffect(() => { const obj = objectRef.current if (obj && obj.contentDocument && obj.contentDocument.defaultView) { _onResize() } }, [objectRef.current])

I added in this in ResizeListener.tsx and it worked, I am not sure if it's the optimal solution.

TL:DR : I published it on my own npm with this issue solved, Do you want me to remove it ? I don't mean to steal your hardwork & credit.

@itoldya Hey there, This is my first time on repos like this ( normally I'd just look for solution and go on ), I actually solved this issue by adding the above code. I don't know if that's optimal, but it seems to solve the issue for me.

After I forked and installed the library from my own repo, I was getting many erros. So I cloned the repo, fixed and pushed and published on my own npm. I dont mean to steal your credit or your hardwork. I have not removed author name. ( had to remove links, was giving errors ), If you tell me to I'd be happy to remove it.

Here it is : https://www.npmjs.com/package/ds-react-grid-gallery

[itoldya]

Hello @danerwilliams @appinteractive @nokynokes @1cedsoda @Dparmar006 and sorry for the late response.

I managed to reproduce the problem in Safari and prepared a fix. I replaced ResizeListener with a new implementation based on ResizeObserver. On my machine, the bug seems to be fixed.

I've published a new package version. Can you please test it out and confirm it is solving the issue?

npm install react-grid-gallery@1.0.1-alpha.0

[ajatkj]

For anyone still having problem with this, you need to set flex-grow:1 on the container containing the Gallery component.