[Masonry] has `NaNpx` height & margin.
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Masonary doesn’t respect the columns refer to the attached image.
The problem seems to be with the height
& margin
of MuiMasonry-root
class.
The height
& margin
properties have NaNpx
value refer to the attached image.
I have changed the spacing to rem like shown in the docs that’s the reason for NaN
refer to the attached image.
What do you suggest to fix this?
Expected behavior 🤔
It should work like a normal Masonary.
Steps to reproduce 🕹
Steps:
- Just copy the masonary from MUI example.
- Change the spacing to rem like shown in the attached image
Context 🔦
No response
Your environment 🌎
Using chrome browser
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19044
Binaries:
Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.39)
npmPackages:
@emotion/react: ^11.7.0 => 11.9.0
@emotion/styled: ^11.6.0 => 11.8.1
@mui/base: 5.0.0-alpha.82
@mui/lab: ^5.0.0-alpha.80 => 5.0.0-alpha.83
@mui/material: ^5.6.4 => 5.8.1
@mui/private-theming: 5.8.0
@mui/styled-engine: 5.8.0
@mui/system: 5.8.1
@mui/types: 7.1.3
@mui/utils: 5.8.0
@mui/x-data-grid: 5.10.0 => 5.10.0
@mui/x-date-pickers: 5.0.0-alpha.1
@types/react: ^18.0.8 => 18.0.9
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
typescript: ^4.6.4 => 4.7.2
Issue Analytics
- State:
- Created a year ago
- Reactions:4
- Comments:5 (1 by maintainers)
Top Results From Across the Web
Top/bottom margin with Masonry stacking - jquery
I know this is an ancient question, but I had this exact problem. The solution, in my case, was adding the width/height to...
Read more >Backpack EASTPAK Pinzip EK0A5B9Q Ultra Marine L83 | Toga ...
Fusing a minimalist Eastern Bye with Western influences, the cowhide leather is studded throughout with carry handles made to look like a cowboy's...
Read more >Approaches for a CSS Masonry Layout
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would...
Read more >margin - CSS: Cascading Style Sheets - MDN Web Docs
The margin property may be specified using one, two, three, or four values. Each value is a <length> , a <percentage> , or...
Read more >DP SUPER STAR Orbatron 3.3 lbs each,6.6lbs Total,Dumbbells ...
Offers will be considered... so, if you really want this, what is it worth to ... #elm-13-export .big-image-box { height: NaNpx; border-bottom-width: 0px; ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I am working on a fix right now. Will update you soon.
UPDATE: I just opened a pull request for the fix.
Any update?