PDF Creator
  • Introduction
    • 👋Welcome
    • Quickstart
    • Key use cases
    • Key features
  • Getting Started
    • Installing the plugin
    • Enabling ID attributes
  • Implementing Key Features
    • Generating PDFs of a single element
    • Generating a PDF of multiple elements
    • Downloading PDFs
    • Saving PDFs to your Bubble database
    • Adding footers
      • Page counters
      • Logos
    • Adding headers
    • Customising your PDF
    • Sending PDFs via email
  • Making PDF files private
  • Tips
    • How the plugin scales elements to the PDF page
    • Adding a loading screen
    • Generating PDFs of repeating groups that span multiple pages
  • Troubeshooting
    • 'Can't find element' message when using square brackets
    • Unwanted white spaces when using nested repeating groups
    • Unwanted gap at bottom of table elements
    • Traditional Chinese characters formatting
    • White space at the top of pages
Powered by GitBook
On this page
  • Video Tutorial
  • Details
  • Size of the PDF page
  1. Tips

How the plugin scales elements to the PDF page

PreviousMaking PDF files privateNextAdding a loading screen

Last updated 1 year ago

Video Tutorial

The below video tutorial demonstrates how the PDF Creator plugin scales elements from the Bubble canvas onto the PDF (relevant section is from 07:35):

Details

The PDF Creator plugin takes the CSS style associated with the target element and uses this to decide on the width/height of the element on the PDF.

For example, the width of the group highlighted below is 0px (min) to inf (max):

This means the PDF Creator will take the 'inf' value and attempt to take up as much space on the PDF as possible. If we set all margins to 0, the target element will take up the full width of the PDF (I've adjusted the background color of the target element to make this obvious):

If we add a right and left margin of 20px (in the Generate PDF Creator action), we'll be able to see this in the output PDF.

Size of the PDF page

The size of the PDF page will depend on which format you choose. You can view the sizes of the various formats (in px) by clicking on the 'show documentation' button underneath the 'Format' field:

For example, a4 pages are 794px wide. Therefore, if we set the max width of our target element to 700px (with no margins), it will take up MOST of the width of the PDF:

If you set the minimum width of the target element to be greater than the width of the PDF page, your target element will 'spill out' over the edge of the page.

In this example, we're setting the min width of our target element to 900px:

Which results in not all of the target element being visible in the PDF: