0

I am using Blueprint CSS on a Rails app. I am making this a 4-column layout with a box around each item. If I have 4 items or 8 items, then everything is fine and I have 2 rows of products. If I have a 9th product or anything not divisible by 4, then the rows and items become disjointed and spills over to the next column. Does anyone know what the problem is?

div.four-column {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-width: 10em;
    -webkit-column-width: 10em;
    column-width: 10em;
    width: 910px;
}

<ul>
  <% @products.each do |product| %>
    <li class="box">
      <%= link_to product.name, product_path(:id) %></br>
      <%= product.price %>
    </li>
  <% end %>
</ul>
TylerH
  • 20,799
  • 66
  • 75
  • 101
noob
  • 1,807
  • 2
  • 18
  • 34

1 Answers1

0

mmm a quick fix might be do just do something like so

<% @count_diff = @products.divmod(4) >
<ul>
  <% @products.each do |product| %>
    <li class="box">
      <%= link_to product.name, product_path(:id) %></br>
      <%= product.price %>
    </li>
  <% end %>
  <% if @count_diff[1] > 0 %>
    <% @count_diff[1].each do |empties| %>
      <li class="box">&nbsp;</li>
    <% end %>
  <% end %>
</ul>

At least i think that's the right code :-) i'm still learning myself. but basically the hack i've provided will just fill in "empty" li tags to balance it all out. So if you have 9 productions it'll make 3 extra empty li's.

There's probably a more "ruby way" of doing it.

witharmshigh
  • 103
  • 1
  • 8
  • thanks for the code. Unfortunately, this didn't work as it didn't recognize divmod. I got the undefined method error because (I think) divmod can only be used with integers. A workaround it would be to do `@products.count.divmod(4)`. I am still working on the rest of your hack. Will let you know how it goes. – noob Oct 19 '11 at 20:46
  • Currently, the next error is `undefined method 'each' for 1:Fixnum` for the `@count_diff[1].each do |empties|` – noob Oct 19 '11 at 20:51
  • what about doing @products.length.divmod(4) instead of count? – witharmshigh Oct 26 '11 at 17:50