How to automatically generate rows in Html/Rails?

Question

So I have a list of products. For Example:

<table>    
  <tr>
    <% products.ascend_by_name.each do |product| %>
      <td id="product_<%= product.id %>">
        #-CONTENT HERE-#
      </td>
    <% end %>
  </tr>
</table>

I would like to make it so that a row is generated every 3 products. As such:

<table>    
  <tr>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
  </tr>
  <tr>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
    <td id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </td>
  </tr>
</table>

Is there any way of achieving this?

Sorry. I answered quickly (and wrong), so I deleted the answer. — Pablo
– Pablo, Commented Feb 8, 2018 at 20:15
It must be a table? Maybe you could achieve something better (and much more responsive, varying the number of columns depending on the screen size) with flex containers. — Pablo
– Pablo, Commented Feb 8, 2018 at 20:19
@Pablo no it doesn't have to be a table, flex would work, but then how do I get in rows? In fact the only reason I'm doing this is to had a border between each row. But I can't add borders individually because the products vary in height — jdstrong95
– jdstrong95, Commented Feb 8, 2018 at 21:38

Sean Huber · Accepted Answer · 2018-02-08 20:21:41Z

2

Use in_groups_of for this (https://apidock.com/rails/Array/in_groups_of). Example:

<table>    
  <% products.ascend_by_name.in_groups_of(3, false) do |product_group| %>
    <tr>
      <% product_group.each do |product| %>
        <td id="product_<%= product.id %>">
          #-CONTENT HERE-#
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

answered Feb 8, 2018 at 20:21

Sean Huber

3,9952 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jdstrong95 Over a year ago

Thanks! This is exactly what I was looking for!

Pablo · Accepted Answer · 2018-02-09 00:41:56Z

I think a better approach to show a list of items (if you want to show more than one per row) is to use flex containers.

You can check how it works in this pen: https://codepen.io/ppintaluba/pen/YeNjzp

html.erb file

<div class="flex-container">

  <% products.ascend_by_name.each do |product| %>

    <div class="flex-item" id="product_<%= product.id %>">
      #-CONTENT HERE-#
    </div>
  <% end %>

</div>

scss file

// Change values as necessary
.flex-container {
  min-width: 745px;
  margin: 4em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

// Change values as necessary
.flex-item {
  text-align: center;
  min-width: 240px;
  max-width: 100%;
  min-height: 100px;
  margin: 0 10px 20px 0;
  padding: 10px 0px 10px 0px;  
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background: #247696;

 // Slow animations
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}

// Some animations when hovering each item (increase size)
.flex-item:hover {
  -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
       -o-transform: scale(1.05);
          transform: scale(1.05);
}

Collectives™ on Stack Overflow

How to automatically generate rows in Html/Rails?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related