search

wynfred / ngx-masonry

Angular Module for displaying a feed of items in a masonry layout
MIT License
157 stars 52 forks source link

Masonry Item auto adjust to use the vertical space #58

Closed clavinovahan closed 4 years ago

clavinovahan commented 4 years ago

We use the latest version of ngx-masonry with Angular 10. When one of masonry item's height changed to smaller, the item below does not automatically move up to take the empty space. Is there something not working with Angular 10 or we need to catch item size change event and call masonry.layout() to update whole layout or there is some other way?

BTW, we tried to call masonry.layout() and it does work but there is no animation for the item below to move up. So the questions are

  1. Is forcing method call layout() the only way to make the item below to move up?
  2. If so, any idea to make the animation - the card below to move up to take the extra space left due to item above size changed to smaller?
wynfred commented 4 years ago

Hi, yes, you need to call layout() in order to move items up. About the animation, the masonry-layout library does support the animation of moving items but it's disabled because of an issue in production, so you have to use Angular animation. However, I'm not sure how to do it or maybe it's not possible.

clavinovahan commented 4 years ago

Thanks for the response. What issue in production? Any idea how to enable the animation?

wynfred commented 4 years ago

The issue is https://github.com/wynfred/ngx-masonry/issues/8 You could try version 1.x but there might be other issues.