Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Masonry] has `NaNpx` height & margin.

See original GitHub issue

Duplicates

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 GitHub Comments

1reaction

hbjORbjcommented, Jul 4, 2022

I am working on a fix right now. Will update you soon.

UPDATE: I just opened a pull request for the fix.

0reactions

ronaklalwaniiicommented, Jun 27, 2022

Any update?

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

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

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

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

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