If your quote looks correct in Quoter but looks different in the PDF or Web View, the issue is usually caused by the underlying HTML structure. Follow the troubleshooting steps below to identify and resolve common HTML formatting issues.
Who can use this feature?
All Quoter users with access to Content Blocks, template content, or item descriptions.
Identify your issue
Symptom |
Likely cause |
|---|---|
Content or pricing table disappears in the PDF |
Fixed-width HTML elements too wide for the page |
Extra blank space or a blank page appears |
Empty HTML tags or leftover formatting blocks |
Images look stretched, blurry, or misaligned |
Incorrect image sizing or fixed dimensions |
Spacing, bullets, or fonts look wrong |
Hidden formatting from imported content |
Content works in Web View but not in PDF |
Unsupported HTML elements in PDF rendering |
HTML edits don't seem to save |
Code View not exited properly before saving |
Content or pricing table disappears in the PDF
Why this happens
A table, image, or other HTML element with a fixed width that exceeds the available Quote area can push content off the page, making it appear missing.
Suggested steps
Open the affected content in the editor and switch to Code View.
Look for fixed-width values such as
width: 853px,width: 1200px, or similar.Change fixed table widths to relative widths such as
width: 100%.Remove unnecessary wrapper elements like extra
<div>tags if they aren't needed.Close the Code View by clicking the icon again.
Preview the Quote again in both Web View and PDF.
Note: If the content was copied from a website, email, Word document, Canva, or a PSA, try to remove excessive formatting before adding it to a Quote.
Extra blank space or a blank page appears
Why this happens
Empty HTML tags can still take up space in a quote. Repeated empty paragraphs, extra line breaks, or leftover formatting blocks can create large gaps or fully blank pages.
Suggested steps
Switch to Code View and look for repeated empty tags such as
<p> </p>.Remove blank blocks at the end of cover page content, appended content, or content blocks.
Avoid adding large numbers of empty lines to force spacing.
Use supported page breaks instead of manual spacing when you need a new section to begin on a fresh page.
Images look stretched, blurry, or misaligned
Why this happens
Images often cause problems when they're oversized, use incorrect dimensions, or use fixed widths that don't adapt well to the page.
Suggested steps
Avoid very large fixed-width images.
Use responsive sizing such as
max-width: 100%where appropriate.Confirm that your page size and orientation match the layout the content was designed for.
Retest after replacing unusually large or oddly proportioned images.
Note: If a transparent PNG doesn't appear transparent in the PDF, try using an externally hosted image instead of an uploaded one.
Spacing, bullets, or fonts look wrong
Why this happens
The editor and the PDF engine don't always handle spacing the same way. Imported content can also carry hidden formatting that changes line spacing, font appearance, or list behavior.
Suggested steps
For a single line break, use Shift+Enter instead of Enter.
If pasted content looks strange, remove the formatting and rebuild it inside Quoter.
Inspect the HTML in Code View for unnecessary tags or inline styles.
Keep styling simple and consistent rather than layering many custom font and spacing rules.
Content works in Web View but not in PDF
Why this happens
Some HTML elements render well in a browser but aren't supported by Quoter's PDF engine.
Suggested steps
Don't rely on iframes for content that must appear in the PDF.
Replace embedded widgets or dashboards with a static image and a hyperlink when needed.
Avoid using emojis in critical quote content unless you've tested that exact content path successfully.
Use simple linked buttons rather than overly complex custom button markup.
HTML edits don't seem to save
Why this happens
Changes made directly in Code View may not persist until you exit Code View properly.
Suggested steps
After editing HTML in Code View, click the Code View button again to exit that mode.
Save the content normally.
Preview the result after saving to confirm the change was applied.
About Froala in Quoter
Froala is Quoter's rich text editor. It provides a visual editing experience for common formatting tasks, and it also lets you work directly with HTML when needed.
In Froala, you can:
Format text using headings, paragraphs, bullets, and links
-
Create or edit tables
Note: You can view additional table settings in the editor by clicking on the table to bring up options such as alignment, border style, and more:
Add images and structured content
Switch to Code View to inspect or clean up HTML
Insert page breaks in template content where supported
Froala is useful for editing content, but it doesn't control how Quoter generates quote pages and PDFs. Content that looks fine in the editor can still look different in the final PDF if the HTML is too complex or too wide.
Keep in mind:
Your editor view, Web View, and PDF output may not always look identical.
Complex HTML copied from external sources is the most common cause of layout problems.
Quoter's PDF rendering is more restrictive than a modern browser.
Simpler HTML usually produces the most reliable results.
| ✉️ Any questions? Reach out to our friendly, neighborhood support team by submitting a support ticket. |
| 🎙️ Interested in attending a live Q&A session with our Product Adoption team? Sign up to attend Quoter Office Hours and get real-time answers to your questions. |