Home Four products per row Bootstrap/ROR stops working with added info?
Reply: 1

Four products per row Bootstrap/ROR stops working with added info?

Christian O'Rourke
1#
Christian O'Rourke Published in 2018-01-10 21:37:30Z

Im having trouble using Ruby on Rail's in_groups_of method to show rows of products in groups of 4. When my code is as follows it works perfectly:

<% @products.in_groups_of(4, false).each do |row| %>
<div class="center">
  <td>
    <tr>
        <% for product in row %>
          <product>
            <u><%= link_to "#{product.title}", product_path(product) %></u>
          </product>    
    </tr>    
  </td>        
</div>

However when I try to add additional product info all of the products are centered. This is the page with the additional info added:

<% @products.in_groups_of(4, false).each do |row| %>
<div class="center">
  <td>
    <tr>
        <% for product in row %>
          <product>
            <u><%= link_to "#{product.title}", product_path(product) %></u>
          </product>

          <%= image_tag product.picture.url if product.picture? %>
          <% if product.active == false %>
            <p>Sorry, this product is not available at this time.</p>
          <% else %>
             <div id="paypalbutton"><%= raw product.paypalbutton %></div>
          <% end %>

        <% end %>  
    </tr>    
  </td>        
</div>
<% end %>

I think my SCSS may be the problem but I'm not sure what's causing it to break. All SCSS used in the page is as followed:

.products {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}

product {
  font-size: 1.5em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  font-weight: normal;
  color: $dark-gray-darker;
  u {
    text-decoration: underline;
  }
}

#paypalbutton {
  height: 50px;
  width: 200px;
  margin:0 auto;
}

Removing the 'margin:0 auto;' from #paypalbutton doesn't change anything either.

Christian O'Rourke
2#
Christian O'Rourke Reply to 2018-01-12 17:20:18Z

I don't think that this is the correct way of solving this but I got it to work using cards and a nav-bar class

<div class="container-center">
<% @products.in_groups_of(4, false) do |group| %>
  <% for product in group %>
    <ul class="nav navbar-nav">
      <li>
        <div class="card" style="width: 25rem;">

          <%= image_tag product.picture.url if product.picture? %>

          <div class="card-block">
            <h3 class="card-title">
              <u><%= link_to "#{product.title}", product_path(product) %></u>
            </h3>

            <div class="center">
              <% if product.active == false %>
                <p class="card-text">Sorry, this product is not available at this time.</p>
              <% else %>
                <div class="card-text" id="paypalbutton"><%= raw product.paypalbutton %></div>
              <% end %>
            </div>

          </div>
        </div>
      </li>
    </ul>
  <% end %>
<% end %>
</div>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.495244 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO