0

I've been trying to make Masonry (also tried Salvattore but none of them will work) to work for a good few hours now, I've followed multiple tutorials and examples but it just won't happen for some reason. I'm using Bootstrap's grid system and angular to create the number of columns.

EDIT: I created a simple fiddle which actually seem to work: https://jsfiddle.net/j57vnaa2/1/

Question is, why doesn't my original code work?

I've included Masonry through the CDN, I've checked the console that the script has loaded and indeed it has. Also did it via bower and NPM to test if it worked with those but it yielded the same result.

I've set the class js-masonry to my container, which is a row with grid columns looped out via ng-repeat. Then I have set the data-masonry-options='{ "itemSelector": ".grid-item" }' as well as applied the class grid-item to my columns. But it just doesn't want to work, it's not doing ANYTHING.

I don't know what else that could be wrong, I've searched and searched the web but come up with no solution.

Is there something obviously wrong here?

<div class="row padding">
  <div class="col-sm-12">
    <div class="grid js-masonry row" data-masonry-options='{ "itemSelector": ".grid-item"}'>
      <h1 class="text-center">Similar movies</h1>
      <div ng-repeat="movie in similarMovies"
           class="col-xs-12 col-sm-6 col-md-3 grid-item cut-off">
        <a href="#/movies/{{movie.id}}">
          <figure>
            <img ng-src="{{getSrc(movie.poster_path)}}" alt="{{movie.title}}"
                 class="image enlarge">
          </figure>
        </a>
      </div>
    </div>
  </div>
</div>
Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175
  • do you mean to say it is not working with `ng-repeat` ? could you reproduce issue here https://jsfiddle.net/j57vnaa2/2/ ? – Pankaj Parkar Jul 19 '15 at 09:13
  • @PankajParkar I'm on it. – Chrillewoodz Jul 19 '15 at 09:20
  • @PankajParkar Unable to reproduce exactly the way it is due to the fact that I'm calling an API to set $scope.similarMovies, could it be that the masonry script runs before the async task is done or something like that? Because when I made an example of your fiddle with images it works: https://jsfiddle.net/j57vnaa2/3/ But in my original code nothing happens, no animations or nothing. – Chrillewoodz Jul 19 '15 at 09:33
  • are you setting up your plugin by calling its any of **Masonry** API method? may be that is getting run before your element gets render..could you try to call it after `ng-repeat` rendering gets finished – Pankaj Parkar Jul 19 '15 at 09:37
  • @PankajParkar No, I'm just initializing it in the HTML since I'm using angular. Don't want to have to create a directive for it if possible. – Chrillewoodz Jul 19 '15 at 09:38
  • @PankajParkar How would I call it after the ng-repeat? – Chrillewoodz Jul 19 '15 at 09:40
  • could you try this http://stackoverflow.com/a/15208347/2435473 this will tell when `ng-repeat` finished is rendering – Pankaj Parkar Jul 19 '15 at 09:56
  • How are you opening your working file in the browser? (via webserver or directly from file) – Loqman Jul 19 '15 at 10:36
  • @PankajParkar I've almost got it working with an angular plugin which uses a directive and like a billion dependencies. But my container becomes 2.000.000px high for some odd reason.. – Chrillewoodz Jul 19 '15 at 10:57
  • @Loqman I let grunt serve my project. – Chrillewoodz Jul 19 '15 at 10:59

0 Answers0