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

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

user2093
1#
user2093 Published in August 15, 2018, 8:44 pm

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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO