How to fix overlapping bricks with Angular + Masonry?

Question

I'm using passy's angular-masonry directives to render tiled elements in my app. Unlike a lot of the masonry examples, my bricks don't include images, just static text and layout content rendered through a custom directive. My setup looks like:

<div data-masonry
     data-column-width="250"
     data-load-images="false"
     data-preserve-order
     data-reload-on-show
     data-masonry-options="{ gutter: 15, isFitWidth: true, transitionDuration: 0 }">

     <div class="masonry-brick"
          data-ng-repeat="event in vm.events | orderBy: 'startTime.toDate()' | filter: (vm.showOnlyRegistered && { going: true })">

          <div data-event-item="event"></div>

     </div>
</div>

data-event-item is my directive that renders something like:

<div class="panel panel-default panel-thin light-shadow bgcolor-override event-item-card">
<div class="panel-body" data-ng-class="{'bg-success': event.going}">
    <div>
        <p class="text-medium text-thin">{{event.name}}</p>
    </div>

    <p>
        <strong>{{event.computed.locationName}}</strong><br />
        <span data-ng-if="!event.virtual">{{event.city}}, {{event.state}} {{event.zipCode}}</span>
    </p>
    <span class="center-block">
        <span data-discover-pill data-type="default">
            <span class="text-thin">{{event.computed.registrationLabel}}</span>
        </span>
    </span>

    <button type="button" 
            class="btn push-to-bottom bottom-center"
            data-ng-class="{'btn-default': !event.going, 'btn-success': event.going}"
            data-ng-click="toggleGoing(event.id)">
        I'm Going <i class="fa fa-check"></i>
    </button>
</div>

In my CSS, I have a defined width and height for the elements that go into the bricks, so that (plus the fact that I'm explicitly setting masonry column-width) should let masonry know how big all my bricks are.

Everything works fine except that sometimes (randomly?) on pageload all the bricks are rendered stacked on top of one another in a big pile on the left edge, as if the layout routine didn't trigger. If the window is manually resized, everything snaps to normal and stays that way. This seems to be a problem that some others have run into: https://github.com/passy/angular-masonry/issues/82

I've tried all the combinations of preserve-order and load-images="false" and so on. I think I need to manually trigger a reload/relayout, but as far as I know with the passy directive, you can't directly call masonry methods.

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

I kept running into issues with Passy's directive. Perhaps it was due to the number of bricks I was loading or my styling but I kept getting a lot of sporadic overlaps, delayed reloading of bricks and so on.

I switched to klederson's angular-masonry-directive and have been extremely happy with the decision. I haven't benchmarked to confirm but it seemed to have sped up load times.

angular-masonry-directive

A very simple and 100% compatible masonry directive for AngularJS ... do you know how to use masonry? Good! You know how to use this.

This directive is meant for the raw masonry lib and not the jQuery one.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 15 '15 at 16:17

Chance

11,043
8
61
84

I was having the same issue! This not only solved the issue but also is faster! Thanks a lot! – rodrigogq Mar 06 '15 at 16:25
thanks for the recommendation! i got the libraries through bower, it had another dependencies on imageloaded. work like charm! – Richie86 Mar 16 '18 at 03:18

score 1 · Answer 2 · edited May 23 '17 at 12:00

For anyone running into a similar problem, I figured it out with some help from these answers. As a bonus, this helps me with refreshing after using Angular filters to modify which bricks are shown (the second linked answer deals with this).

Here's my working code, which I trigger when my async data has loaded on pageload, and also anytime the data is filtered or resorted:

function refresh() {
    // We need to give Masonry a little jump-start, otherwise the bricks
    // will render in one big overlapped stack sometimes
    common.$timeout(function () { $scope.$broadcast('masonry.reload'); }, 100);
}

Without $timeout, it looks (to my poorly-trained eyes) like the reload message is being consumed before the digest cycle completes, so the filtering or sorting may not have already taken place. I'm not sure that this is the best solution, but it seems to work in my testing so far. If anyone has a better one, I'd love to see it.

score 0 · Answer 3 · answered Sep 17 '15 at 13:29

Tried 3 framework and only this one works : https://github.com/s-yadav/angulargrid

No 3rd party lib required !! and smootly with twitter bootstrap. Hope it may help someone in the future

Note on others :

https://github.com/passy/angular-masonry -> work quite smooth on dev but failed on PROD.
https://github.com/klederson/angular-masonry-directive -> works but all the bricks are invisible !!?

How to fix overlapping bricks with Angular + Masonry?

3 Answers3

angular-masonry-directive

Linked