Comments (4)
Hey @Fanzzzd, thanks for the report!
May I ask you to share the code of the live example? If you could share the stackblitz in editor mode, that would be great. This will help us understand the issue better.
from material-ui.
Interestingly it only affects the initial layout. It's fine if it's hidden after it's rendered. (Literally "turn it off and on again" in dev-tools.)
https://stackblitz.com/edit/react-hhacxp?file=Demo.tsx
from material-ui.
Hi @DiegoAndai ,
Here is the editor link to the live example: https://stackblitz.com/edit/react-nxweja?file=Demo.tsx
I observed the same behavior as @mbrookes mentioned. Once the Masonry layout is loaded, setting any element to display: none does not affect the layout.
Issue Analysis:
The issue where the Masonry layout forms a single column when the first item is hidden initially occurs because the layout calculations are based on the first child element. If this element is hidden, its height is zero, which triggers the skip condition. This condition is intended to handle cases where images havenโt loaded yet but also inadvertently causes problems when the first element is simply hidden.
Solution:
I modified the code to identify the first visible child instead of assuming the first child is visible. This ensures that the layout calculations use a visible element, avoiding the height zero issue. Additionally, I added checks to skip any children that are not visible during layout calculations, preventing them from affecting the layout logic.
With these changes, the Masonry layout should initialize correctly even if the initial item is hidden. If you like you can give it a try and plz let me know if it works!
from material-ui.
Thanks for the live example @Fanzzzd. Accepted as a bug.
from material-ui.
Related Issues (20)
- [material-ui][Rating] Refactor & expose a single `Star` component
- docs(readme): incorrect pnpm script HOT 1
- docs(readme): incorrect and missing pnpm scripts
- Right-Click Context Menu Not Appearing in MUI DataTable Component React JS
- [Autocomplete] onHighlightChange called with undefined event contrary to type definition
- Mui fails to render Tabs when using nextjs experimental.taint setted to true
- Menu - MenuItem - after opening Menu is not possible to refresh page by ctrl + R
- Theme defaultProps do not get applied since 5.16.0 HOT 4
- [material-ui][Menu,Popover] `slotProps` cannot modify backdrop slot HOT 1
- [material-ui][v6] variants breaking changes lead to unexpected behavior in component customization HOT 3
- [material-ui][Autocomplete] How to use autocomplete (multiple) with an API? HOT 5
- [codemod] `v6.0.0/styled`, `v6.0.0/sx-prop`, `v6.0.0/theme-v6` codemods fail parsing tokens HOT 2
- [codemod] `v6.0.0/sx-prop` produces strange changes HOT 2
- [material-ui][Popover] How to create a hover card using a popover? HOT 3
- aria-hidden warning HOT 2
- I hope to use storybook MUI to create the new UI library, but the themes from material ui and joy ui can not work together, help me please. HOT 1
- Box modules is broken HOT 1
- Temporary drawer changes content and header width when open in an iframe
- Joy UI: Disabled Link IconButton appearance appears to still be enabled HOT 5
- [joy-ui][Select] Option flickers for multiple and controlled Select
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.