wicked_pdf/wkhtmltopdf ignores Twitter Bootstrap css

StackOverflow https://stackoverflow.com/questions/13364476

Question

i am having trouble generating a pdf document in Ruby using wicked_pdf/wkhtmltopdf from the following sources:

respond_to do |format|
  format.js
  format.pdf {
    render :pdf => pdf_filename(@invoice,false),
        :template => "invoices/generate",
        :layout => "document",
        :show_as_html => params[:debug]
  }
end

-- 

  <style type='text/css'>/*!
  * Bootstrap v2.1.1
  ...
  */
    .clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
    .clearfix:after{clear:both;}
   /*.... and so on twitter bootstrap css is definitely included here ..... */
  </style>
</head>
<body>
<div class="container">

  <div class="row">
   <div id="left" class="span6">
     <!-- any text here -->
   </div>
   <div id="right" class="span6">
     <!-- any other text here -->
   </div>
  </div>
</div>
</body>
</html>

The generated PDF does ignore bootstraps css completely (meaning the whole layout of the document is scrambled). But it`s completely loaded into the "style" section.

When I try to debug (generate.pdf?debug=1) the output html I do get correct formatting as i wanted it to be (#left is a column on the left of the page, #right is a column on the right).

Is wkhtmltopdf capable of rendering twitter bootstrap css ?

I`m using latest wicked_pdf gem with wkhtmltopdf 0.11.0 rc1.

Thank you for any hint on this !

Was it helpful?

Solution 2

Nevermind !!

Updating to the latest Bootstrap version 2.2.1 fixed it (had 2.1.1 prior). Dont ask me why but it must have been an issue in Bootstrap which i didn`t suspect.

OTHER TIPS

In your layout you must provide absolute paths in your CSS include tags OR use the provided helpers:

wicked_pdf_stylesheet_link_tag 'application'
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top