benhowell/react-grid-gallery

Gallery won't show up in reactstrap tabs,if it is not in active tab at first time.

alex-marmot opened this issue · 2 comments

Expected behaviour

Gallery will show up in reactstrap tabs whether the tab is active or not.

Actual behaviour

Gallery won't show up in reactstrap tabs if it is not in active tab at first time.

Steps to reproduce behaviour

here is example code:
my-app.zip

Operating system

macOS 12.6

Browser and version

Microsoft Edge
107.0.1418.28(arm64)

Hardware

Macbook Pro 14

Hello @alex-marmot,

That happens because at the moment when the gallery initially rendering it is in hidden block, so it detects its container size as 0.

I suggest you work around it by triggering rerender of the gallery component on tab change. To perform it just pass key prop to the gallery component like this

<Gallery key={pageTabs} images={images} defaultContainerWidth={300} />

Hello @alex-marmot,

That happens because at the moment when the gallery initially rendering it is in hidden block, so it detects its container size as 0.

I suggest you work around it by triggering rerender of the gallery component on tab change. To perform it just pass key prop to the gallery component like this

<Gallery key={pageTabs} images={images} defaultContainerWidth={300} />

It works! Thanks very much.