loba-b / react-equal-height

Compares element heights and sets the highest
MIT License
18 stars 9 forks source link

Problem refresh on resize window #7

Closed Antoinewaag closed 5 months ago

Antoinewaag commented 1 year ago

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.

loba-b commented 1 year 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

dylanjmcdonald commented 1 year ago

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;
loba-b commented 5 months ago

@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 commented 5 months ago

@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.

loba-b commented 5 months ago

Quite understandable :)