[bug] If you don't use ng-repeat to add the masonry-bricks the layout gets messed up

[dremonkey]

For some reason if the masonry-brick elements are manually added to the page instead of using ng-repeat the size of the wrapper is calculated wrong (ends up much too tall).

Clone https://github.com/dremonkey/angular-masonry/tree/bugDemo and run grunt to see this happening.

[dremonkey]

So I did some testing... in these first two tests I used <div class="masonry-brick">...</div> and I ran console.log(element.masonry('getItemElements')); right after initializing masonry in the masonry directive...

Test 1: When I used ng-repeat to add the masonry-bricks in, console.log(element.masonry('getItemElements')); returns an empty array. Result: Layout is fine.

Test 2: When I added the masonry-bricks manually, console.log(element.masonry('getItemElements')); returns an array with all the masonry-brick elements. Result: Layout is messed up.

Test 3: In the third test I used <div masonry-brick>...</div> and removed the class, and had the masonry-brick directive automatically set the class using element.addClass(itemSelector). Result: Layout is fine.

So from this I assume the issue has to do with the way that masonry is initializing... but I can't for the life of me figure out why this is the case.

The solutions right now, bad as they are, seems to be to either (1) use ng-repeat or (2) use masonry-brick as an attribute and add the itemSelector class in via the masonry-brick directive.

[passy]

Interesting. This must be related to the order in which AngularJS initializes the directives. But if something goes wrong during the initialization, you should usually see an error. Is there anything in the console?

[quanghoc]

I have the same problem. Do you have sample code on this workaround?

(2) use masonry-brick as an attribute and add the itemSelector class in via the masonry-brick directive.

[dremonkey]

@quanghoc I would definitely recommend just using ng-repeat if you can. The problem with the second solution is that it would require you to change the angular-masonry.js code. It would be hacky, is not a real fix, and so is something that you should avoid doing.

What I suggest doing instead if you cannot use ng-repeat is to (1) make sure that whatever class you are using as the itemSelector is removed from the brick. (2) set the itemSelector class using ng-class like so ng-class="{'masonry-brick': true}".

Your template code for the masonry portion should end up looking something like this:

<div masonry>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/100/?2296" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/300/?9982" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/200/?3672" alt="A masonry brick">
    </div>
    <div masonry-brick ng-class="{'masonry-brick': true}">
        <img ng-src="http://lorempixel.com/g/400/400/?7152" alt="A masonry brick">
    </div>
</div>

Hope that helps

[quanghoc]

Not using ng-repeat is due to SEO reason.

I tried the above code ng-class={'masonry-brick': true} and it didn't work. The 3 classes ng-scope loaded masonry-brick are set in the div but their positions are still the same. Do you have working example?

[dremonkey]

Checkout https://github.com/dremonkey/angular-masonry/tree/no-ng-repeat-demo and run grunt

The only difference is in the index.html file where I added what I suggested before.

[quanghoc]

Is your index.html a working example? Because it doesn't work for me so not sure if I missed something. See screenshot with the blank area

[dremonkey]

hmm... that's odd. It does work for me locally... let me see if I can set up a plunkr or something for you to look at instead

[dremonkey]

Here is a plunkr demo: http://embed.plnkr.co/jvg8AZ/preview

Hope that helps

[quanghoc]

Oh I see the difference. If you added preserve-order, this won't work.

Here: http://plnkr.co/edit/MDo1ui

[quanghoc]

Just want to check in if there is a workaround preserve-order issue

[dremonkey]

Not that I am aware of

[gigablox]

I am experiencing a strange difference in behavior using the non ng-repeat version as well. The grid does not resize items properly in columns and spacing becomes very erratic.

[brutto]

@passy you close all issues about this bug (duplicate or not), but there is no any solution for this yet. =
Probably you need to reopen one of them...

[passy]

@brutto It's a known bug with Masonry and I'm not aware of any work-arounds we can implement here. If you got any ideas, I'd be delighted to review a PR for this issue.

[brutto]

Can you point me, please, how it can bug with Masonry if in clear (only Masonry without angular) use you can implement manual blocks and masonry display them properly?

I switched to angular masonry only yesterday so do not understand yet how it works internally, but suddenly find this annoying "bug" and then found several similar issues here. Almost all of them are closed as duplicated each other (cross linked) without final explanation =)

On 4 December 2014 at 15:54, Pascal Hartig [email protected] wrote:

@brutto https://github.com/brutto It's a known bug with Masonry and I'm not aware of any work-arounds we can implement here. If you got any ideas, I'd be delighted to review a PR for this issue.

— Reply to this email directly or view it on GitHub https://github.com/passy/angular-masonry/issues/43#issuecomment-65627516 .