Open fabiocarneiro opened 3 years ago
Hi Fabio,
Leaning towards intended behavior for this one. For clarification, are you requesting an alternate mode of filling up the list where the items are filled row by row, with each column independent of each other layout-wise and the "shortest" column getting the next item?
Leaning towards intended behavior for this one
I can understand, but as pointed out, this is hardly useful. The majority of the use-cases will be with lists that grow, and in this case, the visual glitches make it unusable.
I consider this a bug because this is a material library. It certainly violates the material guidelines for Motion. It doesn't feel natural, intentional, or build the right momentum. https://youtu.be/cQzien5H2Do
requesting an alternate mode of filling up the list where the items are filled row by row, with each column independent of each other layout-wise and the "shortest" column getting the next item?
Yes. I think declaring a container for each column and filling the "shortest" container with the new element would make the most sense. It would probably be an issue if the screen aspect ratio changes and you end up with more/fewer columns, such as when switching a mobile device orientation, but that could justify a full redraw.
If the component itself would provide some javascript to make that behavior work or if that would be left to the developer or framework libraries that build on top of MDC, I think either is valid.
Ideally, one would be able to use a single container list and switch some direction
property on CSS, but I don't think this is possible. I also saw other Masonry approaches that use position: absolute
and calculate such positions with javascript. I think allowing normal flow position
options would be beneficial.
@allan-chen, it's not intended behavior, it stems from a misinterpretation of the spec, and the issue has been reported in https://github.com/material-components/material-components-web/issues/2865.
The gist is that it was easier to implement the feature in a broken way by using only CSS, and even after their designer collegues at Google have confirmed that the implementation was wrong, they've kept it because it was easier to maintain.
Thanks for the clarification Armin. I'll close #2865 and keep this open as the canonical FR.
Bug report
Applying the Masonry style to the
mdc-image-list
component does not work in any scenario apart from a fixed-size list.Steps to reproduce
Actual behavior
There is a single container where all the items go together. When new items are added, the content comes as part of the last column, and since the component tries to equalize the size of all columns, all the columns except the first one are reordered.
Expected behavior
There should be an HTML element container for each column and items should be added to each column alternately.
Screenshots