[Masonry] Improve height computation and detect changes in `children` #29351

hbjORbj · 2021-10-28T10:10:24Z

Closes #29315

Before this PR:

Height computation is not precise and hence masonry's height is not tall enough to render the correct number of columns
Code sandbox: https://codesandbox.io/s/basicmasonry-material-demo-forked-zkp5g?file=/demo.js

Solution:

Error comes from the use of clientHeight. For example, a 90px-tall item is considered 88px. Switch to using window.getComputedStyle().height as it is more precise.
In addition, this PR contains a change so that height/order/margin computation is run in response to changes in not only column and spacing but also children as well
Code sandbox: https://codesandbox.io/s/basicmasonry-material-demo-forked-e981i

mui-pr-bot · 2021-10-28T10:12:45Z

Generated by 🚫 dangerJS against 750c4b7

hbjORbj added 2 commits October 28, 2021 11:02

[Masonry] Do not use clientHeight as it's not precise

2f6ba02

[Masonry] Run computation in response to changes in children

750c4b7

hbjORbj added bug 🐛 Something doesn't work component: masonry This is the name of the generic UI component, not the React module! labels Oct 28, 2021

hbjORbj requested review from eps1lon and siriwatknp October 28, 2021 10:38

hbjORbj mentioned this pull request Oct 28, 2021

[Masonry] New flexbox implementation doesn't respect columns prop #29315

Closed

eps1lon approved these changes Oct 28, 2021

View reviewed changes

hbjORbj merged commit 808be08 into mui:master Oct 28, 2021

Provide feedback