1

In my app, I render a bunch of @trailers:

index.html.erb:

<div class="trailers infinite">
  <%= render @trailers %>
</div>

_trailer.html.erb:

<div class="col-sm-6 col-lg-4 trailer">

</div>

When a trailer is clicked, I want to append an alert to the trailer:

$('.trailer').click(function(){
    $(this).closest('.trailer').append($('.first-notification-message').slideDown())
});

Except my current method is messing up the formatting because it's pushing down only one @trailer column. I'd prefer to push down everything equally. But not sure how to do this because there are different number of columns for different screen widths.

Any ideas?

enter image description here

Jackson Cunningham
  • 4,973
  • 3
  • 30
  • 80

1 Answers1

2

You have to put a row around each row so that when a column grows in height, it will expand the whole row. So loop through @trailers using each_with_index or each_slice to print the columns in their own .rows.

You can also make each column have a min-height: 200px; so it will always have space for what you add.

You can also pop up a modal dialog instead of changing the height of the column. http://getbootstrap.com/javascript/#modals

Chloe
  • 25,162
  • 40
  • 190
  • 357
  • Wouldn't each_with_index be pretty messy since I have to account for each different screen size? – Jackson Cunningham Dec 14 '15 at 22:40
  • Yes but that's how Bootstrap works. You could build it for 3 columns for the large screen, and if the browser gets smaller to trigger `.col-sm-6`, then you will have 2 columns in a row on the screen, followed by one column on its own row, but those 3 will be inside of the same `.row` div. It is messy so you might like to set the `min-height` for columns instead. You might find something useful in this answer. http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Chloe Dec 14 '15 at 22:52
  • Ok thanks. I'll try the first method because making height set adds too much space – Jackson Cunningham Dec 15 '15 at 00:18