Menu
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.
282
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
To view the template file, go to Rails application >> app >> View>> Home folder where the templates files are available.
For Rails 3.1+ apps, you should use the asset pipeline. Place stylesheets in app/assets/stylesheets/ if they are specific to your application. You can also put them at vendor/assets/stylesheets/ if they are external (say if they are stylesheets for a javascript plugin.)
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.
100
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!!!!
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
