Skip to content

feat(masonry): add optional adjustHeight prop to prevent layout overlap#918

Open
igenius99-dev wants to merge 1 commit intoDavidHDev:mainfrom
igenius99-dev:feat/masonry-auto-height
Open

feat(masonry): add optional adjustHeight prop to prevent layout overlap#918
igenius99-dev wants to merge 1 commit intoDavidHDev:mainfrom
igenius99-dev:feat/masonry-auto-height

Conversation

@igenius99-dev
Copy link

Summary

Adds an optional adjustHeight prop to the Masonry component to allow the container to dynamically match its content height and prevent overlap with subsequent elements.

###Problem
The Masonry layout uses absolute positioning, which causes the container to have no intrinsic height. This leads to overlapping content below the component unless height is manually managed.

Solution

  • Compute container height based on layouted items
  • Add adjustHeight prop to enable dynamic height behavior
  • Apply height only when the prop is enabled (no breaking changes)

Changes

Core Component Updates

  • Updated Masonry layout logic to compute container height from item positions
  • Added adjustHeight prop (default: false)
  • Applied conditional container height via inline styles

Variants Updated

To maintain consistency across the library, the change was applied to all Masonry implementations:

  • src/content/Components/Masonry/Masonry.jsx (default JS version)
  • src/tailwind/Components/Masonry/Masonry.jsx (Tailwind version)
  • src/ts-default/Components/Masonry/Masonry.tsx (TypeScript version)
  • src/ts-tailwind/Components/Masonry/Masonry.tsx (TypeScript + Tailwind)

Supporting Files

  • src/constants/code/Components/masonryCode.js updated to reflect new prop in code previews
  • src/demo/Components/MasonryDemo.jsx updated to demonstrate usage
  • public/r/Masonry-*.json updated to sync registry component definitions

No breaking changes. Existing behavior remains unchanged by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant