Closed Antoinewaag closed 5 months ago
@Antoinewaag Hi, can you add some working example of the problem? I just checked it on NextJS with SSR and after page load and browser resize the height recalculates.
https://user-images.githubusercontent.com/1701766/221266954-4ad3b131-762b-4cf1-a234-ae5e8e80d12e.mp4
I'm also running into an issue where this is not refreshing on window resize. Here is my code - I can add a screen recording as well, but it would just be a few blue boxes that do not change in height when the screen is sized down.
import { EqualHeight, EqualHeightElement } from 'react-equal-height';
const ResultsRoute = () => {
return (
<EqualHeight>
<ul className="flex w-full items-stretch gap-6">
<li className="flex-1">
<EqualHeightElement name="Name">
<div className="flex h-full bg-blue-400 p-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
laoreet pellentesque erat. Mauris facilisis, magna et hendrerit
dapibus, dolor nulla fermentum ante, non ullamcorper dui mauris
quis odio.
</div>
</EqualHeightElement>
</li>
<li className="flex-1">
<EqualHeightElement name="Name">
<div className="flex h-full bg-blue-400 p-4">
Lorem ipsum dolor sit amet
</div>
</EqualHeightElement>
</li>
<li className="flex-1">
<EqualHeightElement name="Name">
<div className="flex h-full bg-blue-400 p-4">
Lorem ipsum dolor sit amet
</div>
</EqualHeightElement>
</li>
</ul>
</EqualHeight>
);
};
export default ResultsRoute;
@dylanjmcdonald Can you spare a link to a working example in some sandbox? As with the author's example, I am unable to achieve this.
@dylanjmcdonald Can you spare a link to a working example in some sandbox? As with the author's example, I am unable to achieve this.
Sorry this was over a year ago and if I recall correctly we ended up writing out our own solution.
Quite understandable :)
The package works SSR on Next.JS and detect perfectly the height of each element.
However, when I resize my page nothing is happening. I got the same problem if I try to use the method
forceUpdate
, it's not working.