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.

strange behaviors of masonry grid

See original GitHub issue

Hello!

I would like to report some strange behaviors of masonry grid. Also I would contribute on the library if you are okay with this.

Sometimes grid gets lost its column count to 1 and never get recovered until I refresh the page https://drive.google.com/open?id=15m5UkzDATY_GLsPpZ0_Zw8IYOEc-ZD-4
Sometimes items are overlapped. They are not being displayed. It only happens on the first column https://drive.google.com/file/d/1umLm6pacTwylzr2GWomrHH6zdTkl0LBo/view

Here goes my implementation

<ngx-masonry class="my-50" [options]="{gutter: gutter}" (layoutComplete)="layoutCompleted($event)">
  <div ngxMasonryItem class="masonry-item" *ngFor="let idea of ideas"
    [style.width]="cardWidth"
    [style.margin-bottom.px]="gutter">
    <job-hub-idea-board-card [editable]="editable"
                             [selectable]="selectable"
                             [clickable]="clickable"
                             [idea]="idea"
                             [isCustomer]="isCustomer"
                             (view)="view($event)"
                             (edit)="edit.emit($event)"
                             (delete)="delete.emit($event)"></job-hub-idea-board-card>
  </div>
</ngx-masonry>
<p class="d-flex align-items-center justify-content-center text-primary" *ngIf="hasPending">Loading
  {{ ideas.length > loaded ? ideas.length - loaded : loaded - ideas.length }} more images...
  <span class="d-inline-block ml-10 px-10 py-10 position-relative"><job-hub-spinner diameter="20"></job-hub-spinner></span>
</p>

export class IdeaBoardComponent implements OnInit {

  @Input() ideas: Idea[] = [];
  @Input() gutter = 20;
  @Input() col = 4;
  @ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;

  loaded = 0;
  cardWidth;

  get hasPending(): boolean {
    return this.ideas.length > 0 && Boolean(this.loaded < this.ideas.length);
  }

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this.cardWidth = this.sanitizer.bypassSecurityTrustStyle(`calc((100% - ${(this.col - 1) * this.gutter}px) / ${this.col}`);
  }

  layoutCompleted(e) {
    if (this.loaded > this.ideas.length) {
      this.loaded = this.ideas.length;
      return;
    }
    if (e && e.length === 1) {
      this.loaded++;
    }
  }

  reset() {
    this.masonry.reloadItems();
  }
}