Version: 3

🔥 Gravity PDF v3 end of life was 2017-06-20 and this version is no longer supported. This legacy documentation is kept for reference only.

Example of Floated and Fixed Positioning in PDF Templates

Floats and Fixed Positioning

The plugin ships with a number of PDF templates showing off the features of mPDF. These can be found in your PDF_EXTENDED_TEMPLATES directory.

Overview

To easily switch between custom PDF templates change the template query string parameter to the template name when viewing a PDF via your admin area.

Template Name: example-float-and-positioning05.php Example URL: https://test.com/?gf_pdf=1&amp;fid=3&amp;lid=40&amp;template=example-float-and-positioning05.php

Floats and fixed positioning is partially supported in mPDF but doesn’t conform to all requirements of the W3 CSS2 specification.

Download Example PDF

Floats Limitations

Only block elements can be floated.
Floats only work if a width is set on the element
The standard box-model applies so floating two elements left with a 50% width and any borders or padding won’t produce a two-column layout (the second box would be pushed down below the first).

Clearing Floats

The CSS clear property can be set on all block elements, as well as <hr> and <br > tags.

Positioning Limitations

The CSS position property supports the fixed and absolute values. The absolute parameter will treat the entire page as the containing element while fixed is bound to the page margin container.

Only block-level elements can be positioned.
The block-level element you want positioned needs to be a direct child of the <body> tag. Positioning won't work if the element is nested.
All positioning is relative to the current page.
Setting overflow: auto causes text to auto fit within the block size.
You cannot nest fixed position or floated elements inside other fixed position elements.
Setting overflow: auto; on positioned elements can cause long PDF generation times.

Rotating Positioned Elements

Like the CSS table rotate property, positioned elements can also be rotated 90 degrees.

#ID {
  position: absolute;
  top: 50%;
  left: 5mm;
  rotate: 90;
}