Keep up to date with Gravity PDF

  • This field is for validation purposes and should be left unchanged.
Gravity PDF Three Column Layout Support using CSS Ready Classes

Gravity PDF Three Column Layout Support using CSS Ready Classes

In our core PDFs, Gravity PDF attempts to match the same layout as your form when using CSS Ready Classes. For instance, if you use the gf_left_half and gf_right_half classes on two fields that are next to each other in the form builder this will create a two column layout in the PDF (and your form). We also support three column layouts with the gf_left_third, gf_middle_third and gf_right_third field classes.

Provided you aren’t using a half or three column layout on checkbox or radio button fields we also support gf_list_2col, gf_list_3col, gf_list_4col and gf_list_5col classes in the PDF. The class gf_list_inline is not supported.

If you want to use columns in your custom PDF templates, you’ll need to copy the appropriate CSS from our core template files and use a format like this:


<!-- Two Column Layout --> <div class="row-separator"> <div class="gf_left_half"> <!-- Left Column --> </div> <div class="gf_right_half"> <!-- Right Column --> </div> </div> <!-- Three Column Layout --> <div class="row-separator"> <div class="gf_left_third"> <!-- Left Column --> </div> <div class="gf_middle_third"> <!-- Middle Column --> </div> <div class="gf_right_third"> <!-- Right Column --> </div> </div> <!-- Add Five Column List Layout --> <div class="row-separator"> <ul class="gf_list_5col"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div>

Signup for the latest Gravity PDF news, tips and updates

  • This field is for validation purposes and should be left unchanged.
Scroll To Top

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in $ Australian Dollars ($) AUD.
  • AUDAustralian Dollars ($)
  • USDUS Dollars ($)
  • CADCanadian Dollars ($)
  • EUREuros (€)
  • GBPPound Sterling (£)
  • NZDNew Zealand Dollar ($)
  • JPYJapanese Yen (¥)