Reputation: 9579

For a Rails View *.html.erb : where can I place the style sheet?

I have this file:

app/views/listings/list.html.erb

in my rails project. Here are the contents of the file:

<h1>This file is:"list.html.erb"</h1>  

<!DOCTYPE html>  
<html>  
  <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
      html { height: 100% }  
      body { height: 100%; margin: 0; padding: 0 }  
      #map_canvas { height: 100% }  
    </style>  
    <script type="text/javascript"  
      src="http://maps.googleapis.com/maps/api/js?key=key&sensor=false">  
    </script>  

    <%=javascript_include_tag 'application'%>  
  </head>  
  <body onload="initialize()">  
    <div id="map_canvas" style="width:80%; height:80%"</div>    
    <input type="button" onclick="getlistings();" value="Add Markers">   
    <input type="button" onclick="clearMarkers();" value="Remove Markers">   
  </body>  
</html>

Id like to apply a style sheet to it. Where should I place the stylesheet? I tried placing the code in this file:

app/assets/stylesheets/listings.css.scss

But the style wasn't applied to the html file. Also do I need to change anything in my html view file to include the style sheet?

This is the style sheet that resides at : "app/assets/stylesheets/listings.css.scss"

// Place all the styles related to the Listings controller here.  
// They will automatically be included in application.css.  
// You can use Sass (SCSS) here: http://sass-lang.com/  
.listings  
{  
  table tr td  
  {  
    padding: 5px;  
    vertical-align: top;  
  }  


dt  
{  
  color: #232;  
  font-weight: bold;  
  font-size: larger;  
}  

dd  
{  
  margin: 0;  
}  
}  
#map_canvas  
{  
  width: 80%;  
  height: 80%;  
}

So wondering if anyone can give me a hand?

Thanks
EDIT
So the application.html.erb file is fine, so is the application.css. I altered the list.html.erb file after reading the answer posted below. The new list.html.erb file is as follows:

<h1>Filename = list.html.erb</h1>  

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }   
</style>  
<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=AIz&sensor=false">  
</script>  
<%= stylesheet_link_tag 'application' %>  
<%=javascript_include_tag 'application'%>

<%= stylesheet_link_tag 'listings' %>

Only issue is now, I want to take

<style type="text/css">  
  html { height: 100% }  
  body { height: 100%; margin: 0; padding: 0 }  
  #map_canvas { height: 100% }  
</style>

this part out from the list.html.erb and put it into the list.css.scss file. But when I do that the map_canvas disappears from the page, it doesnt show.

Upvotes: 10

Answers (3)

Mian Kashif Ali

Reputation: 71

I had come to know the same problem but solved, follow the instructions below

place your xxxx.css file in assets/stylesheets e.g in app/assets/stylesheets/xxxx.css
Edit /config/initializers/assets.rb and paste this code

Rails.application.config.assets.precompile += %w( xxxx.css ) and save it.

3- in the head tags section of your list.html.erb add

<%= stylesheet_link_tag 'xxxx' %>

e.g

<head>
<%= stylesheet_link_tag 'xxxx' %>
<head>

4.Restart rails server for effects

Chill!!!!

Upvotes: 3

Andrew

Reputation: 43103

Where you put the stylesheet is fine. You need to make sure that your application layout (app/views/layouts/application.html.erb) includes the stylesheets in the header:

stylesheet_link_tag 'application'

Then you need to make sure it's being included in your application manifest: app/assets/stylesheets/application.css

At the top you should see a block that looks like this:

/* ...
*= require_self
*= require_tree .
*/

If it doesn't say *= require_tree . then it won't autoload the scss files in your stylesheets directly. For more see the rails guide.

If your application layout and manifest are correct and you're still having issues, add the text of those files to the question and I'll take a look.

Update: Also, it looks like you're not understanding layouts correctly.

When any view renders you want the final output to look like this:

<!DOCTYPE HTML>
<html>
  <head>
    ...header stuff goes here...
  </head>
  <body>
    ... body stuff goes here...
  </body>
</html>

Your headers etc. are pretty much standard stuff that are repeated all the time, only the content in the main part of your page is different from page to page. So to keep you from having to duplicate this stuff over and over again Rails uses layouts.

Your layout file, app/views/layouts/application.html.erb should look like this (at minimum)

<!DOCTYPE html>
<html>
  <head>
    <title>The name of your site</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application' %> 
    <%= csrf_meta_tags %>
  <head>
  <body>
    <%= yield %>
  </body>
</html>

When you load a given view rails will fill in the content from that view where the yield command is in the layout.

Note, your view is named wrong. If you are showing a list it should be app/views/listings/show.html.erb, or if you are showing the index of all the lists it should be app/views/listings/index.html.erb.

Then in that file you should have:

<h1>This file is:"index.html.erb"</h1>

See the rails guide for more about layouts and rendering.

However, it looks like you're trying to dive into rails with no idea what's going on in the system. Welcome to Rails, I think you'll find it's really great, but you will do yourself a huge favor to start with a good tutorial. You can try the Getting Started Guide. I also recommend Michael Hartl's book "Rails 3 Tutorial". It's a great resource.

Upvotes: 15

Simon Perepelitsa

Reputation: 20639

You should have a stylesheet_link_tag in <head>:

<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

If you don't have an application.css manifest you can link to the stylesheet directly instead:

<%= stylesheet_link_tag 'listings' %>

Upvotes: 0

For a Rails View *.html.erb : where can I place the style sheet?

Answers (3)

Related Questions