wynfred/ngx-masonry

Layout issue with version 11.0.2

manuelosorio opened this issue · 7 comments

manuelosorio commented

The change made to src/lib/ngx-masonry.directive.ts in commit 66534b4 ended up breaking the layout I had. I'm not completely sure to what that change actually does but below I'm providing links to a few screenshots to show the issue.

NGX-Masonry@11.0.0
http://prnt.sc/15shks4
http://prnt.sc/15shkzv

NGX-Masonry@11.0.2
http://prnt.sc/15sj99m
https://prnt.sc/15sgl9r
http://prnt.sc/15sh4t2

wynfred commented

Hi, not sure how that change could cause the bug. Do you have images in that component?

manuelosorio commented

I do not have images on the component. I honestly don't know how it would affect it either.

manuelosorio commented

Component GIST: https://gist.github.com/manuelosorio/be2290111426a1aee4912dbfe890d679.
I looked furthered into the issue. It seams that this only happens when images are not the target for the masonry item.

Pull request: #81 seams to fixed the problem when I add [ready]='true'

  <ngx-masonry [options]="masonryOptions" [ordered]="true"  class="lists-container">
      <div ngxMasonryItem [ready]='true' class="masonry-item" *ngFor="let list of masonryLists">
          ...
      </div>
  </ngx-masonry>
wynfred commented

Hi, I'm not sure if it's the same issue but I think I fixed the one in #81. Please try the new release and see if it works and feel free to reopen if it doesn't. Thank you!

manuelosorio commented

I tried the new update. I'm still having the same issue where an empty space at the top of my ngx-masonry items.

wynfred commented

Then it could be a different issue. Could you try make a stackblitz repro?

manuelosorio commented

@wynfred I made a stackblitz. I had to manually add the ngx-masonry repo as ngcc was not compiling it on stackblitz after install.

The component using ngx-masonry is fake-list.

https://stackblitz.com/edit/todo-demo

https://todo-demo.stackblitz.io/