CODEWITHSUNDEEP
cssruby-on-rails-3ruby-on-rails-3.2sass
Mr_LinDowsMac
Mr_LinDowsMac

Reputation: 2702

CSS stylesheet not applied in Rails 3.2.8

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>

Upvotes: 0

Views: 538

Answers (1)

Piotr Mąsior
Piotr Mąsior

Reputation: 1580

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

Upvotes: 1

Related Questions