Resizing causes bricks to move to the end

[otterslide]

On every resize my bricks move to the very end of the current layout(just after the last brick), leaving a big empty gap. Then on the next re-size they move back to the beginning and everything looks good. It's as if the bricks don't know to start at the beginning of the layout..

What's interesting is that on every re-size they keep jugging back to the beginning, and everything looks good, then back to the end of the layout, and a big empty space remains above them..

I tried plain JS masonry, no angular, and it works fine. Any ideas?

[jpyams]

+1 I'm having the same problem, except the gap also appears after the bricks when they're in the correct layout. It's like there are two sections in the masonry layout, one after the other, and the bricks oscillate between the two.

[otterslide]

jpyams, are you using | filter in ng-repeat by any chance? I've seen this cause issues similar to what you describe. I believe you have to filter in your javascript, not in ng-repeat.

[jpyams]

@otterslide, no I'm not using a filter (not actually sure what that is). I forgot about this post; I've gotten masonry to work since then and for the life of me I can't remember what I did.

[otterslide]

I couldn't get it to work with this plugin, but I got it to work with https://github.com/klederson/angular-masonry-directive I even tried angular-isotope plugin. They both broke when I changed the model using JS filters. They seem to work at first, but if I keep running different filters eventually items overlap or go in weird positions.

I think it's something to do with the ng-repeat finishing event, and not being caught properly/on time... since ng-repeat does not emit when it's done, it's hard to figure out when it's really done to re-order the bricks. Somehow that other plugin seems to do it perfectly.