Rails 4 Alternate Background for Row Item

Question

I've been following along with the "Agile Web Development with Rails 3.2" book, however I'm using rails 4.2.1 and it hasn't been an issue up until I've tried to alternate the background color of rows. Part of chapter six in the book.

In my products.css.scss file I have:

.list_line_even {
  background: #e0f8f8;
}
.list_line_odd {
  background: #f8b0f8;
}

In my index.html.erb I have:

<p id="notice"><%= notice %></p>
<h1>Listing Products</h1>
<table>
<% @products.each do |product| %>
<tr class= "<%= cycle('list_line_odd', 'list_line_even') -%>">

  <td>
    <%= image_tag(product.image_url, class: 'list_image') %>
  </td>

  <td class= "list_description">
    <dl>
      <dt><%= product.title %></dt>
      <dd><%= truncate(strip_tags(product.description), length: 80) %></dd>
    </dl>
  </td>

  <td class= "list_actions">
    <%= link_to "Show", product %><br/>
    <%= link_to 'Edit', edit_product_path(product) %><br/>
    <%= link_to 'Destroy', product, data: {confirm: "Are you sure?"}, method: :delete %>
  </td>

</tr>

  <% end %>
</table>

<br/>

<%= link_to 'New Product', new_product_path %>

My page source shows each of the items as alternating between:

<tr class= "list_line_odd">
<tr class= "list_line_even">

and so on...

Everything seems to work except the background color. I tried changing the css.scss file to have just "red", and "blue" for the colors. It didn't change anything.

Much thanks!

Answer 1

Try to check if products.css.scss is loaded. You can put your styles to the application.css.scss to check if it resolves the issue.

Answer 2

I'm late to the party, picking up Rails 4.2 in 2019 :P However, I ran into this issue and wanted to share what I found in the rare event someone else runs into this.

I had this same problem. However, it wasn't from the CSS not loading. Rather, there was no container with the .products class such that it would apply. I dynamically added the class to the body tag via Firefox and it started working.

If you look at the snippet of code provided for the /app/views/layouts/application.html.erb, this file sets the body class accordingly. However, the book presents this as the default file rather than telling you to make any changes - which appears to be in error.