I am learning Rails from "Agile Web Development With Rails" (4th edition, Rails 3) and I am having trouble getting a stylesheet to apply. To quickly take you through what I have done so far, I first generated a scaffold:
rails generate scaffold Product title:string description:text image_url:string price:decimal
Then of course:
rake db:migrate
I then used the db/seeds.rb file to load some data into the products table. When I loaded localhost:3000/products, everything was working great. Now, I copied the stylesheet code the book provides to the products.css.scss file generated by the scaffold:
.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;
}
}
Now, when I load localhost:3000/products, the stylesheet is not being applied.I can see the stylesheet in inspect element, but it is not applying. I have tried everything imaginable. Firstly, I made sure this line of code was in my application.html.erb:
<%= stylesheet_link_tag "application", :media => "all" %>
Given that my new stylesheet (products.css.scss) is in the assets/stylesheets/ directory, it should be loaded. When I inspect element on localhost:3000/products, I actually see the stylesheet there, but it is not being applied. the next thing I tried was running:
rake assets:precompile
No success. After deleting the public/assets directory, I made sure this line of code was in my config/application.rb file:
config.assets.enabled = true
It was. Next, I headed over to my assets/stylesheet/application.css file and tried adding this line of code:
*= require products
Once again, no success. Lastly, I tried restarting my server to see if there was an effect. Failure again. I am at dead end here. Please, I would appreciate any and all input on this matter as I am so burnt-out and frustrated with this matter.
i just spent an hour figuring out the answer, since been having the exact same issue myself. go to your application.css.sass and make sure it has
/* ...
*= require_self
*= require_tree .
*/
in it. this auto loads all the other .css.sass in apps/assets/stylesheets, then precompiles them into public/assets/stylesheets to be 1 statis css file, and that is being served to your browser.
not sure if this will work but worth a shot, try removing .css, just keep products.scss. Also get a very simple style going and see if it works. Or even inline it to see.
Related
I'm using Rails with webpacker. Everything works fine locally but as soon as I push up to heroku it breaks.
I removed everything except my own scss and noticed some styles weren't loading in production.
For example in the same file, .fabric-container will not be present, but #renderCanvas will:
.fabric-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
border-radius: 10%;
overflow: hidden;
&:after {
content: '';
display: block;
margin-top: 100%;
}
}
#renderCanvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .6;
}
Here is a shot of the css with everything else stripped out, and on the bottom is the css of the page on prod. Totally missing .canvas-container Works fine locally!
Many red herrings in this debug session... but I knew SOMETHING was altering the output css.
Turns out Rails Jumpstart Pro includes tailwind and purgecss.
We have included PurgeCSS by default to automatically remove unused
CSS when deploying to production. This greatly reduces the size of
TailwindCSS in production to deliver a much faster experience in
production.
This is located in postcss.config.js which is why I didn't see it in config/environments etc.
So if this is happening to you, check postcss.config.js, and either add your files there or remove it altogether!
I've searched through Stack lot of times but still nothing works for me.
Images Ive set in my css.erb file does not show in heroku app.
here is my css file example
.bird-box {
position: relative;
height: 600px;
background: url(<%= image_path 'bird-bg.jpg' %>);
background-size: auto 600px;
background-position: top center;
background-attachment: fixed;
overflow: hidden; }
I've changed producion.rb
config.serve_static_files = true;#ENV['RAILS_SERVE_STATIC_FILES'].present?
config.assets.compile = true
But that did not help at all.
Also I tried to compile locally than push to heroku, still no result. Can anybody tell me the way out?
Go to development console in your browser and check if images are loaded
Try to precompile assets on heroku using heroku run rake assets:precompile
After deploy on heroku cedar, images desapear.
I've a CSS like :
:css
/* */
table.table thead .sorting { background: url('assets/datatables/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('assets/datatables/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('assets/datatables/sort_desc.png') no-repeat center right; }
/* */
table.table thead .sorting_asc_disabled { background: url('assets/datatables/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('assets/datatables/sort_desc_disabled.png') no-repeat center right; }
and relative png into app/assets/images/datatables/Locally works, but not on Heroku.
I could also use = asset_tag('datatables/icon.png') ..., but how to do it inside CSS ?
I've also tried config.action_dispatch.x_sendfile_header = nil in config/environments/production.rb without success.
In the production environment the assets will have an MD5 thumbprint appended to their URL. It is important that you use the asset path helpers so that the right filename is used.
It appears that you are using Haml, based on the :css filter.
In Haml you can interpolate Ruby into the doucment with #{ ruby }
:css
table.table thead .sorting { background-image: url(#{ asset_path('datatables/sort_both.png')}) }
... and so on.
If you are using Sass/SCSS, you can use the built in asset helpers.
table.table thead .sorting {
background-image: asset-url('datatables/sort_both.png');
}
Its a little more complicated if you are using plain CSS. You'll need to append .erb to the css file. ('assets/stylesheets/file.css.erb')
table.table thead .sorting {
background-image: url(<%= asset_path('datatables/sort_both.png') %>);
}
You should use Sass or SCSS. Its the cleanest and leanest.
I just got it working myself.
The key is putting this line in your application.rb:
config.assets.initialize_on_precompile = false
Are you using the jquery-datatables-rails gem? If not, you should! Put this line in your gemfile:
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
and run:
bundle install
NOTE: Don't put it in your assets group or it will not work when deploying to heroku (since the assets group is not used in production).
Also, make sure to put this line in your application.rb (sorry to repeat, but its important):
config.assets.initialize_on_precompile = false
Add these to your application.js
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
Add this to your application.css:
*= require dataTables/jquery.dataTables.bootstrap
And add this to your js.coffee file for your controller you are using datatables in:
If you are using fluid containers:
#// For fluid containers
$('#dashboard').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
If you are using fixed width containers:
#// For fixed width containers
$('.datatable').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap"
});
I'm working with Rails 3.1's asset pipeline and although it seems to work flawlessly in my development environment on my localhost, I'm having huge issues with it on engine yard.
Here's my basic problem.
When I include images for a background in one of my scss files:
a {
color: #3c7f8b;
font-weight: bold;
padding-left: 35px;
font-size: 13px;
display: block;
background: white url(shade.png) top right;
&:hover {
color: #222222;
background: white url(shade2.png) top right; }
&.on {
color: #222222;
background: white url(shade2.png) top right; } } }
I run into the following issues: Even though I have precompiled my assets, the browser requests /assets/shade.png instead of /assets/shade-FINGERPRINT.png which is the actual file that exists.
Does anybody know what I can fix this issues with referencing images in my assets folder inside my .scss files?
You should use image-url rather than url to reference images when using scss in Rails 3.1.
Also, ensure you load compass before sass-rails, as sass-rails over-rides the asset methods to work with the asset pipeline.
Lastly, if you're using capistrano to deploy, add in
load 'deploy/assets'
To enable asset compilation when you deploy.
Check out the answer from 'tybro0103' on this post - Rails 3.1 and Image Assets
basically change the file from scss to scss.erb and then use the asset_path helper method
pre-compile before deploy
disclaimer: i have not tried this myself
qnm Actually I think there is an error with the image_url helper. Not sure if they fixed it but I saw a recommendation to use asset_url with the "image" explicting stated.
i.e. asset_url("some.img","image)
In my Ruby (1.9.2) Rails (3.0.x) I would like to render a web page as PDF using wicked_pdf, and I would like to control where the page breaks are. My CSS code to control page breaks is as follows:
<style>
#media print
{
h1 {page-break-before:always}
}
</style>
However, when I render the page with wicked_pdf, it does not separate the document into two pages. Is there something else that I must do to get page breaks with wicked_pdf?
For some reason, the "#media print" didn't quite do it. I just went with
.page-break { display:block; clear:both; page-break-after:always; }
for the CSS rule, and then I stuck the following in my page for a page break:
<div class="page-break"></div>
That just worked.
Tried Jay's solution but could not get it to work (maybe a conflict with other css)
I got it to work with this:
<p style='page-break-after:always;'></p>
I had the same problem and I discovered something that might help. This was my page break CSS code:
.page-break {
display: block;
clear: both;
page-break-after: always;
}
This didn't work because of TWO reasons:
I. In one of the SASS imported file I had this line of code:
html, body
overflow-x: hidden !important
II. The other problem was bootstrap
#import "bootstrap"
It looks like because of the float: left in:
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
the page break is no longer working. So, just add this after you import bootstrap.
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: initial !important;
}
None of these solutions worked for me. I did find a solution that worked for many people in the gem issues here - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524
you want to add CSS on the element that needs the page break. In my case, it was table rows, so I added:
tr {
page-break-inside: avoid;
}
Make sure that the stylesheet link tag includes media='print" or media='all' if you are using an external stylesheet:
<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>
or
<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>
otherwise wicked_pdf will not pick it up.
Also note that if you are in the middle of a table or div with a border, that the page-break attributes will not work. In this case, it's time to break out jQuery and start splitting things up. This answer: https://stackoverflow.com/a/13394466/2016616 has a good snippet for position measurement. I am working on clean and repeatable table-splitting code and will post it when I have finished it.
i had the same issue and what ended up working for me was to make sure that my element with
page-break: always;
was on the root of the document, seems when its nested inside of other elements, especially ones with height assigned, the declaration gets ignored.
hope this helps someone.