onResize doesn't work when min-height is set about react-resize-detector HOT 4 CLOSED

What are you trying to achieve with minHeight?

When you set the min-height property on your div, it ensures that the div will always have a minimum height even if its content is removed. However, the resizeObserver won't trigger onResize event when the inner content is deleted because the div itself is still maintaining its minimum height.

Adding a border to the div might be affecting the way the browser calculates the height, potentially triggering the onResize event correctly. This behavior can be attributed to how the browser renders elements and calculates their dimensions when a border is present.

Generally, this code:

const [heightEl, setHeightEl] = useState(0);

<ReactResizeDetector onResize={(_, height) => setHeightEl(height)}>
  <div
    style={{
      minHeight: heightEl,
    }}
  />
</ReactResizeDetector>

Is not a good practice.

Depending on what you're trying to achieve, maybe you actually want to store a heightEl in a css-variable?

Or, just try to manually reset the heightEl when isButtonClicked changes

 useEffect(() => {
    // Manually trigger onResize when content is removed
    if (!isButtonClicked) {
      setHeightEl(0); // Reset the height
      setTimeout(() => {
        // Use a setTimeout to ensure the height change is detected
        const divHeight = ref.current?.clientHeight;
        if (divHeight) setHeightEl(divHeight);
      }, 0);
    }
  }, [isButtonClicked]);

from react-resize-detector.

I've provided this test code to show my problem, but in project which I am working on, I am using min-height to hold height of each rows in boxes (to have the same height of each row, something like in Grid).

I use ResizeDetector to check the height of elements and set it to its maximum for each row in the same line, but the problem is when content is deleted, min-height blocks the onResize event.

Do you have any suggest how to deal with it?

from react-resize-detector.

I think you can make all rows to have the same height with plain css, either by using flex: 1 1 auto or by using grid-auto-rows: 1fr

from react-resize-detector.

Or by doing something like align-items: stretch, justify content: stretch, min-height: 100%

from react-resize-detector.