The stylesheet displays correctly in Grover debug mode, but does not appear in the downloaded PDF file

Having some trouble applying CSS to Grover, a tool I'm using to render and download PDF copies of documents generated in my app. While the CSS renders as expected in Grover's debug mode (rendered in Chromium), it seems that my application.css is not being applied when downloaded as a PDF in headless mode.

The method used to generate the PDF is within a concern:

def purchase_order_gen(the_purchase_order, request_host_with_port)
  puts "generating pdf"
  puts "Generating PDF for PO " + the_purchase_order.id.to_s
  puts "Host is " + request_host_with_port

  html = render_to_string({
                              partial: '/purchase_orders/display_purchase_order',
                              layout: '/layouts/pdf_layout.html.erb',
                              locals: { po: the_purchase_order }
                              })
  puts "html";
  ap html

  the_display_url = 'http://' + request_host_with_port
  grover = Grover.new(html, {format: 'A4' , display_url: the_display_url})
  pdf = grover.to_pdf
  puts "Back From Grover!"

  return pdf
end

To reference the CSS, I've placed the following line in the <head> of my layout:

<%= stylesheet_link_tag '/assets/stylesheets/application.css'%>

It seems like there may be an issue with the stylesheet_link_tag, possibly related to the asset pipeline where the debug version is able to access but the headless version is not pulling from.

Answer №1

It was discovered that in order for backgrounds to appear on Grover, a configuration setting of print_background: true is required. After only setting backgrounds initially and realizing they weren't showing up, adjusting that parameter to true in our Grover initializers resolved the issue.

Answer №2

Shoutout to @neanderslob for the helpful tip! It took me a solid 2 hours of detective work, but I finally got it figured out - and this solution worked like a charm.

The magic lies in config/initializers/grover.rb

Within Grover's configuration file, add the following code snippet:
Grover.configure do |config|
  config.options = {
    print_background: true
  }
end

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the CSS for the "a" tag's "title" attribute

I am using jquery.fancybox to create an image modal on my website. I have noticed that I can add a description using the title attribute. However, when the description is too long, the text is displayed on a single line and some of it disappears. How can ...

jQuery.addClass function not functioning correctly

I am encountering an issue where the functionality in this code snippet isn't quite working as expected. Specifically, I would like the 'huh' div to become opaque when the menu is hovered over. While attempting to achieve this with fadein/ou ...

Overridden CSS rules

Having a slight CSS dilemma. Within my webpage's html, I have the following structure: <div class='box-div'> <div>Entry 1</div> <div class='hide'>Entry 2</div> </div> Here is my associated ...

What's the best way to position a grid item so that it moves along with its fellow siblings

I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's exi ...

What steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

Aligning the icon within the div and adding a gap between each div

I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image: https://i.sstatic.net/Dy5F3.png My struggle lies in centering the fa-envelope-o icon both ...

Issues with displaying HTML video content

Seeking assistance with a unique coding predicament. I've got an HTML file that showcases a JavaScript-powered clock, but now I'm looking to enhance it by incorporating a looped video beneath the time display. Oddly enough, when the clock feature ...

Sidebar collapse using Bootstrap

I have been working on creating a collapsible sidebar that pushes the content on the right, but I'm facing issues with responsiveness. When I display the sidebar, the content is getting compressed instead of pushed. I tried adding flex-shrink-0 to the ...

Positioning parent and child elements using CSS

If you have a moment, please check out this URL where I've provided a more detailed explanation of the issue: How to Make an Image Responsive Within a Division I am looking to adjust the width of .slider-wrapper to 100%. Can anyone advise on how to u ...

Having trouble tackling whitespace removal in the DIV? Usual methods seem ineffective?

I am currently working on a vertical-align "3 block" design and trying to eliminate the white space between the divs. I have experimented with setting the font-size of the body to 0px and then assigning individual font sizes to each child, but this approac ...

When you hover over nested HTML-lists in a webpage, make the tree's long text lines expand gracefully using a combination of HTML, CSS

In my Angular 4 application, I have a left div that displays a tree of items as recursive HTML lists. When there is a long text, it gets cut off by the border of the div and a scrollbar appears. I want to have the text expand beyond the border and show in ...

Adjusting various settings on breakpoints in MUI v5

Previously in MUI version 4, I was able to apply multiple style parameters within a single media query using the following code: [theme.breakpoints.up('xs')]: { width: 100px, color: green, }, [theme.breakpoints.up('md' ...

Can someone help me troubleshoot why my multi-step form is not functioning properly?

I've been working on a multi-phase form, but it's not behaving as expected. I've tried different code variations, but for some reason, it's not functioning properly. After spending two days on it, I'm starting to feel a bit frustra ...

The overlay background is being obscured by surrounding elements

Hey there! I'm experimenting with some basic coding and ran into an issue with an overlay. Here's the site link: Sorry for the strange language. :-) If you click on the button with the tiny icon, you'll notice that the overlay form isn&apos ...

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

Using jQuery to alter the properties of CSS classes

Is it possible to modify the properties of a CSS class, rather than the element properties, using jQuery? Here's a practical scenario: I have a div with the class red .red {background: red;} I wish to change the background property of the class re ...

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

Create a unique JSON list that supports polymorphism

I have a /tags.json where i want to display a list of players and teams, using the following code which I have included in both the players and teams models. def token "#{id}_#{self.class.name}" end Tags controller def index @players = Player.all ...

How can I generate a bounding box with CSS?

I am a newcomer to vue.js and I have a question about creating a bounding box for any element. This bounding box resembles a view box in svg. For example, I have created a checkbox like this one: checkbox Below is the code to style the checkbox: /* checkb ...