CSS and wicked_pdf not working

Asked 17/8, 2018 at 6:42 Answered 17/8, 2018 at 10:6

Solved ruby-on-rails ruby-on-rails-5 wicked-pdf

I'm not sure what i'm missing, but my css doesn't seem to be working along side wicked_pdf. I have an image linked in my file, which works, but the styles are missing.

Gemfile

gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'

Controller

format.pdf do
  render pdf: "day_report", 
  template: 'day/day_report',
  page_size: 'A4'
end

application.html.erb

<head>
 <title>Page Title</title>
 <%= wicked_pdf_stylesheet_link_tag "styles" %>
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

day_report.pdf.erb

<%= wicked_pdf_image_tag( 'logo.jpg', height: '100', width: '100') %>

<div class="page-header">
    Day Report
</div>

styles.css

.page-header {
  padding: 40px 0;
  background-color: red;
  text-color: #fff;
}

Perspective answered 17/8, 2018 at 6:42 Comment(2)

Try adding styles directly to your day_report.pdf.erb. – Swanger 17/8, 2018 at 7:43

This works, but seems an odd way around it. – Perspective 17/8, 2018 at 7:45

Create a different layout for pdf as below. e.g pdf.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 
  'reload' %>
  <%= wicked_pdf_stylesheet_link_tag "styles" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>
</head>
<body>
  <%= yield %>
</body>
</html>

Change controller action as:

format.pdf do
  layout:'pdf.html',
  render pdf: "day_report", 
  template: 'day/day_report',
  page_size: 'A4',
  encoding:"UTF-8"
end

Change styles.css to styles.scss and add it assets.rb.

Rails.application.config.assets.precompile += %w(styles.scss)

Hope this will help.

Cheers

Swanger answered 17/8, 2018 at 10:6 Comment(3)

Right. Resolved. I was putting the stylesheet links in my application header when I needed to put them in the pdf layout. Cheers. – Perspective 17/8, 2018 at 21:39

Adding .css file to assets.rb worked for me. – Liddle 25/10, 2021 at 10:34

Don't you need the method render in front of all the options? – Quetzal 12/8, 2023 at 6:8

Can you please rename styles.css to styles.css.scss and add this file to precomiple list Rails.application.config.assets.precompile += %w(styles.css) and try.

Ancipital answered 17/8, 2018 at 6:55 Comment(6)

Do I put this in my development/production environment? – Perspective 17/8, 2018 at 7:10

You can put in application.rb file – Ancipital 17/8, 2018 at 7:15

Thanks Prosenjit. Still having the same issue. Just won't recognise the styles. – Perspective 17/8, 2018 at 7:18

What you could try is add the following config.assets.precompile += ['styles.css'] in config/initializers/assets.rb – Valentinevalentino 17/8, 2018 at 7:30

No luck with that either Kedarnag. – Perspective 17/8, 2018 at 7:43

After adding it to assets.rb, did you precompile assets ? – Valentinevalentino 17/8, 2018 at 8:19

Recommended topics

Hot tags