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.

bug: sometimes grid column goes into one

See original GitHub issue

Hello!

Sorry again, I am opening this issue again, that 1 grid issue getting more buggy. We are seeing this problem so frequently, I would like to know source of this problem and I hope to help you to figure out this together.

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

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();
  }
}