Converting quote template in PDF HubSpot

[ViniBernardo]

Hello, everyone
How are you?

I’m facing a huge problem with a quote template in HubSpot. It’s a model that was completely modified and coded using HTML.

Inside HubSpot, the information is relatively well organized — the classic “everything in its own place.” However, when it’s converted to PDF within HubSpot, the layout falls apart, for example:

• Text goes outside of images

• Tables that are together get separated

• Unnecessary page breaks

• Etc…

I wanted to check if it’s possible to make some adjustments to the general code, maybe with a script or layout fixes, to prevent these issues from continuing. Ideally, something that corrects one part without breaking another, you know?

I’m attaching some screenshots showing how it looks inside HubSpot, how the PDF comes out, and another one with the code for review.

#SOS

[MichaelMa · Accepted solution]

As far as I'm aware, the Quote PDF option basically uses the built-in Print/Save to PDF function of your browser/computer with all it's limitations and fault. Aka, if you opened any webpage and used the Print/Save to PDF, that's what you would see.

A cursory glance at your HTML, your primary issue is probably going to be all the position:absolute CSS you have going on. I'm not really sure why it's necessary. It seems like you set almost everything to absolute which kind of defeats the point of it?

For anything "printable", I usually follow the mantra of "you need to build it like a text document rather than a webpage". Unless you want to spend a ton of time playing around with CSS and print media queries.

[MichaelMa · Accepted solution]

As far as I'm aware, the Quote PDF option basically uses the built-in Print/Save to PDF function of your browser/computer with all it's limitations and fault. Aka, if you opened any webpage and used the Print/Save to PDF, that's what you would see.

A cursory glance at your HTML, your primary issue is probably going to be all the position:absolute CSS you have going on. I'm not really sure why it's necessary. It seems like you set almost everything to absolute which kind of defeats the point of it?

For anything "printable", I usually follow the mantra of "you need to build it like a text document rather than a webpage". Unless you want to spend a ton of time playing around with CSS and print media queries.

[ViniBernardo]

Hello @MichaelMa  Thank you for your reply and sorry for the delay.

A large part of the use of "position: Absolute" is because a module was created to render an image, and there are some texts that need to be on top of the image.

Something that wouldn't appear in the code without it.

Is there another way to do this?

If not... how would (unfortunately) one work on correcting the CSS along with some media print? I don't know if I managed to express myself well in the question.

[enrico_baskey · Accepted solution]

Hello @ViniBernardo, 
using position absolute on everything is kind of "old-school" css. 
Apart from @MichaelMa background-image solution, which is a very good option, you could also have a look at ✨CSS-Grid✨. 
You can easily layer text on images with that and it still works on print.

Just define a grid with row and col 1fr, define the area on the parent like `grid-template-areas: 'image'`, and then for the image and the text (children) assign `grid-area: 'image'`. You can then set the text to a higher z-index than the image. 
With that you can also fix potential other uses of position:absolute aswell. 
Grid and flexbox are here to fix the old pos: absolute and floating mess from the old-days. 

if you just want to apply css specifically for print, you must use a media-query like this: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing#using_media_queries_a...

styles defined within this will only apply for print. 
For development you can also activate print rendering in the browser tools, and then play around with it and update your css in print media-queries if you don't want to break your existing screen rendering. 

This is a good page to get started with css-grid: https://css-tricks.com/css-grid-layout-guide/.

[MichaelMa]

Truthfully, this is one of those things you need to have a dev either work with you on a session to fix the CSS or have them review it on their own. 

What I would do is probably go section by section and test to see what is breaking the PDF functionality. Maybe the image/text position:absolute is not an issue nowadays (I always remember it causing issues). Maybe there's some other CSS that's causing it.

For image/text module layout, you can try setting the background image on the block and then layout out text as normal (using flex or grid?). That would potentially keep things structured better. This would be the same as using Hubspot's drag and drop system and setting the background on the section and doing columns/rows for the content.

There is CSS for attempting to define where pagebreaks occur which might help:

https://www.w3schools.com/cssref/pr_print_pageba.php

https://www.w3schools.com/cssref/pr_print_pagebb.php

https://www.w3schools.com/cssref/pr_print_pagebi.php

[Victor_Becerra]

Hi @ViniBernardo ,
 

Thanks for sharing this — I know how frustrating it can be when a custom quote template looks great in HubSpot but breaks apart when exported to PDF.

I’m looping in a few folks who’ve worked through similar PDF rendering issues in custom quote templates, Hi @MichaelMa @Bortami @BrandonWoodruff 

have any of you found reliable fixes for layout shifts, page breaks, or spacing problems in the PDF output? Any insights would be super helpful here.

Hope we can get you some workable solutions.
Victor