Using Masonry in Rails - boxes not moving on window resize

Question

I have tried this using both the files from the Masonry website, plus the masonry-rails gem, but am getting the same problem.

Basically, when I resize the browser window, the boxes aren't moving to fit the new page size. Instead, I'm just getting scroll bars appearing in the browser.

I know that the files are loading fine, and picking up the right selectors, because if I e.g. change the column width in the masonry() parameters, the boxes do appear in a different place when I load the page.

Also, I'm using Bootstrap if that's relevant, but I've named the selectors so they don't clash with the ones reserved for bootstrap - e.g. using #masonry-container instead of #container.

Any help would be much appreciated, thanks!!

application.js:

//= require masonry/jquery.masonry

message_board/show:

<div id="show-message-board">
    <%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>  
</div>


<script>
$(function(){
  $('#masonry-container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 50,
    isAnimated: true
  });
});


</script>

_show_message_board.html.erb:

<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
  <div class="item">
    <p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
    <p class="message_content"><%= message.content %></p>
  </div>
<% end %>

EDIT:

I've tried using the following as suggested elsewhere, and that still doesn't work!:

$(function(){
    var $container = $('#masonry-container');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.item'
        });
    });
});

I'm assuming you have a closing in the _show_message_board.html.erb — purplerice, Dec 25 '12 at 01:53

score 0 · Answer 1 · answered Dec 25 '12 at 01:41

Here's what I did to get Masonry to work in my Rails project. Perhaps this will help you...

I downloaded the "jquery.masonry.min.js" file from the site and placed it in my app\assets\javascripts directory.
I added
```
//= require jquery.masonry.min
```
to my application.js file

I created a separate css file for masonry (just to keep things neat) called "masonry.css.scss" under my app\assets\stylesheets directory. This is the CSS I have (I'm using "box" instead of your "item"):

.box {
  margin: 5px;
  padding: 5px;
  background: #D8D5D2;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline;
  width: 260px;
}

.box img { width: 100%; }

Since I'm using the code in my "home\index.html.erb" file, I created a "home.js" file under my app\assets\javascripts" directory. This is the js code I have:

jQuery(document).ready(function () {
        var $container = $('#UserShoppingRequestsContainer');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector:'.box',
                isAnimated:true,
                animationOptions:{
                    duration:750,
                    easing:'linear',
                    queue:false
                }
            });
        });
    })

Finally, in my "home\index.html.erb" file, I have something like this:

 <div id="UserShoppingRequestsContainer">
    <% @shopping_requests.each do |shopping_request| %>
       <div class="box col3" id="<%= shopping_request.id.to_s %>">
          <%= link_to image_tag(shopping_request.request_picture.url(:medium)),                    user_shopping_request_path(shopping_request.user, shopping_request) %>
          <p class="serif1_no_padding"><%= shopping_request.category.name %></p>
       </div>
    <% end %>
 </div>

I think that's it.

Using Masonry in Rails - boxes not moving on window resize

1 Answers1

Linked