Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Posted by William Roller
William Roller
10,775 Points

Masonry Layout dealing with expanding divs

Hi I am using the masonry layout for a ruby on rails app I've been working on. The masonry layout works fine however, each div in the masonry layout has a button that when clicked expands the div's height. As of right now when the user clicks on that button the expanded content is just cut off. What I am trying to do is have the masonry layout adjust based on the new expanded div height.

Here is the code I tried to implement already but have been unsuccessful.

HTML

   <div class="pin" id="<%= pin.class.name %><%= pin.id %>">
   <div class="pin-pic-holder">
   <%= image_tag(pin.image, class: "pin-pic") %>
  </div>
  <div class="pin-comment">
  <div class="comments">
   <%= render 'comments/comments_collapsed', commentable: pin %>
  </div>
   </div>

The expanding happens in the pin-comment div and once the user clicks on the "comment-icon" the div should expand

<% if commentable.comments.any? %>
      <%= render partial: "comments/comment", :locals => { comment: commentable.comments.first } %> 
    <% end %>

    <%= form_tag( comment_expand_path(1), method: "post", remote: true ) do %>
      <%= hidden_field_tag 'commentable_id', commentable.id %>
      <%= hidden_field_tag 'commentable_type', commentable.class.name %>
      <%= image_submit_tag "comment-icon.png", class: "comment-icon" %>
    <% end %>

    <p class="comment-count"><%= commentable.comments.count if commentable.comments.any? %></p>

JQuery

$( function() {
  $(".comment-icon").on( 'click', '.comments', function() {
  $( this ).find('.pin-comment').toggleClass('is-expanded');
  $container.masonry();
  });

});

CSS

  .is-expanded {
       display:block;
        height: 100px;
        overflow: scroll;
     }