Home/ Questions/Q 8904905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:15:23+00:00

For some reason i can’t get the stylesheet correctly applied in products I’m following

  • 0

For some reason i can’t get the stylesheet correctly applied in products
I’m following the book “Agile Web Development with Rails 4th Edition”. In the book, it looks like the background inside the products table alternates with pink and other color.

I’m newbie on rails i don’t know so much about CSS or SCSS yet.

The file ../depot/app/assets/stylesheets/products.css.scss has the following:

/* START_HIGHLIGHT */
.products {
  table {
    border-collapse: collapse;
  }

  table tr td {
    padding: 5px;
    vertical-align: top;
  }

  .list_image {
    width:  60px;
    height: 70px;
  }

  .list_description {
    width: 60%;

    dl {
      margin: 0;
    }
dt {
      color:        #244;
      font-weight:  bold;
      font-size:    larger;
    }

    dd {
      margin: 0;
    }
  }

  .list_actions {
    font-size:    x-small;
    text-align:   right;
    padding-left: 1em;
  }

  .list_line_even {
    background:   #e0f8f8;
  }
  .list_line_odd {
    background:   #f8b0f8;
  }
}
/* END_HIGHLIGHT */

This is ..app/views/products/index.html.erb

<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,
                  confirm: 'Are you sure?' ,
                  method: :delete %>
    </td>
  </tr>
<% end %>
</table>

<br />

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

And ..app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Depot</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<!-- START_HIGHLIGHT -->
<body class'<%= controller.controller_name %>'>
<!-- END_HIGHLIGHT -->

<%= yield %>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    first of all

    <body class'<%= controller.controller_name %>'>

    I think = is missing in here:

    <body class='<%= controller.controller_name %>'>

    Second one

    without manifest file (application.css) it is hard to say if you require that stylesheet but I suppose it should be:

    /*
 *= require_self
 *= require products
 */

    or even better instead of require inside manifest file, include css for particular controller this way in layout:

    <%= stylesheet_link_tag params[:controller] %>

    also for best practice before you ask question, please ensure if in your browser that particular css is included. Inspect compiled css or document structure with developer tools.

    best

    • 0