[ImageItemList] Fix incorrect (below) rendering

[omriklein]

• I have followed (at least) the PR section of the contributing guide.

Closes: #38341 (comment)

Before: https://mui.com/material-ui/react-image-list/#title-bar-below-image-masonry

Preview: https://deploy-preview-38452--material-ui.netlify.app/material-ui/react-image-list/#title-bar-below-image-masonry

[mui-bot]

Netlify deploy preview

https://deploy-preview-38452--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 1a831af

[RohitPaul0007]

It will be great if you do not add this thing into this arrow function.

[omriklein]

It will be great if you do not add this thing into this arrow function.

Where do you think that is should be?

[RohitPaul0007]

It will be great if you do not add this thing into this arrow function.

Where do you think that is should be?

I think you should apply the spread operator outside the function , and then you should use the "overflow" property inside the arrow function.

[DiegoAndai]

Hey @omriklein, thanks for working on this 🎉

I will add the link to the issue in the PR description.

May I ask you to explain why this fixes the issue? I see it fixes it, but I don't understand why. We can't merge this PR as is because the Woven example breaks (docs vs. this PR). That's why I want to try and understand the underlying issue so we can develop a proper solution.

[cristianmacedo]

It appears that adding overflow: hidden to the ImageListItemRoot styled component didn't resolve the issue On my end. I suggest maybe trying a different approach:

const ImageListItemRoot = styled('li', {
... 
})(({ ownerState }) => ({
  ...
  display: 'block',
  position: 'relative',
- overflow: 'hidden',
  ...
}));

...

<ImageListItemRoot
  ...
  style={{
    height,
    gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
    gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
    marginBottom: variant === 'masonry' ? gap : undefined,
+   display: variant === 'masonry' ? 'inline-block' : undefined,
    ...style,
  }}
  ...
</ImageListItemRoot>

So it prevents the immediate children of the ImageListItem component from breaking into the next column when variant === 'masonry'. This approach seems to have fixed the issue on my end, I hope it helps!

[omriklein]

@DiegoAndai The overflow: hidden fixed the issue because by default, the content is not clipped to the element. When setting the overflow property to 'hidden', the content is clipped to the element.

@cristianmacedo This seems like a good solution, I'll check this out. Thanks

[omriklein]

@cristianmacedo I tried your solution but the inline-block did not work correctly.
When the list has only 2 items, I got the following result:

I expect the images to show side by side and not one on top of the other.

[DiegoAndai]

Adding the overflow: hidden property to the "masonry" variant only fixed the Woven example 👍🏼

@omriklein:

The overflow: hidden fixed the issue because by default, the content is not clipped to the element. When setting the overflow property to 'hidden', the content is clipped to the element.

I understand that. Why did clipping the content cause it to be correctly placed? Why, when the content is not clipped, it's placed in column two, but when it's clipped, it's still visible and placed in column one.

@cristianmacedo:

It appears that adding overflow: hidden to the ImageListItemRoot styled component didn't resolve the issue On my end.

Can you share an example of the code you're using that is not fixed by adding overflow: hidden. That way, we can improve the solution.

[omriklein]

@DiegoAndai It seems to be a more general problem with HTML & CSS.
When creating a list with column-count > 1, items with multiple element split between the columns.
From what I could find, when the list element (li) is made out of a few elements, the elements will go to the other columns; For example, if we add another div to the list element and change column-count: 3, we can see that the 3 divs will spread across the 3 columns.

I'm yet to figure out exactly why only overflow: hidden works, but my guess is that this method of clipping the content stops it from spreading to other columns.

The most basic example of this bug is as follows:

<!DOCTYPE html>
<html lang="en">
<body>
    <ul class="list">
        <li class="item">
            <div>text 1</div>
            <div>text 2</div>
        </li>
    </ul>
</body>
<style>
    .list{
        column-count: 2;
    }
    .item{
        overflow: hidden; /* Without this line, the bug happens */
    }
</style>
</html>

[DiegoAndai]

@omriklein, thanks for the minimal example of the bug. It is indeed a weird behavior.

I investigated, and #33593 introduced this issue. Changing from inline-block to block to fix #33328 introduced this one. This code sandbox example (line 12) shows that adding inline-block back fixes this issue. Of course, we cannot just do that because we would reintroduce #33328.

The root cause is that the container height is not calculated properly. This code sandbox example shows that by adding a red border to the container. What do you think about using break-inside: avoid on the item to prevent content inside it from breaking into another column? Here's a code sandbox example (line 12) of this.

[omriklein]

@DiegoAndai Thank you! The break-inside: avoid did the job. I updated the code accordingly.

[DiegoAndai]

Thanks for working on this @omriklein! 🎉

[oliviertassinari]

Nice, this PR relies on the same CSS property that I used in #36673 (comment).

@DiegoAndai I polished a bit the issue/PR titles, labels, descriptions.