CSS stylesheet not applied in Rails 3.2.8

Question

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>

Answer 1

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

CSS stylesheet not applied in Rails 3.2.8

Question

1 answers

solution1
1 ACCPTED 2012-11-24 10:07:14

CSS stylesheet not applied in Rails 3.2.8

Question

1 answers

solution1 1 ACCPTED 2012-11-24 10:07:14

solution1
1 ACCPTED 2012-11-24 10:07:14