Using Foundation with Masonry

[Nate Hill]

Hi guys, I'm working on an app that uses zurb foundation for frontend design, as well as masonry-rails.

The two don't seem to be playing well together, unfortunately. When I remove the call to foundation's js, masonry works perfectly, but with the js included, masonry fails to reinitialize when the back button is clicked.

You can take a look at this problem at http://alpha.fluentli.com/languages.

To mimic the issue, just click on any language, then click the back button. You'll see that the language boxes are not formatted with masonry.

I thought this could be a problem with turbolinks, but removing it did nothing.

The coffee script I'm using is very simple, so I don't think there's any problem with the way I'm calling masonry:

$ ->
  $('#pins').masonry
    itemSelector: '.box'
    isFitWidth: true

Any tips, ideas, or other suggestions you could offer would be much appreciated! Thank you for the help.

[Dario Zaccagnini]

$('#pins').imagesLoaded -> is missing

so you can try

$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true

I hope this helps..... I actually have a problem with the boxes not floating to fill the container and staying vertical - if you know of any gotcha

[Nate Hill]

Thanks! I had tried having it with imagesLoaded before, but it doesn't change it.

It's hard to know what problem you're having without seeing your set up. Double check to make sure the right container is being called to be filled. I had problems with nesting containers before.