Oracle APEX fit an interactive grid onto the page when printing

If your Interactive grid does not fit all the columns onto the page when printing this blog post will show you how you can add a small bit of code to your print CSS to fit all the columns onto the page when printing.

There are lots of blogs that will show you how to set up printing in APEX, so I won't go into much detail on print set up here.  This blog post will show you how to fit an interactive grid with lots of columns into a page when you print it.

I have a standard print CSS set-up in Inline CSS that tries to maximize the space available for printing by setting padding and margins;

@media print{

/*----------------------------------------------------------

-- Print the page as a portrait A4 page with no margins

---------------------------------------------------------- */ 

@page 

{

    size: A4 portrait;

    margin-left: 1px !Important;

    margin-right: 1px !Important;

    margin-top: 0px !Important;

    margin-bottom: 0px !Important;

    padding: 0px 0px !Important; 

}

and a print button which prints the page using JavaScript;

window.print();  

The issue I have is when printing the page the IG does not fit onto the page cutting off several columns;

It's a simple hack to get the IG to fit on the page.  Just add this code to your print CSS;

#ig_outputs{zoom:60%;}

(play around with the zoom level to fit your IG into the page.)

Where ig_outputs is the static ID of the IG

Now when I print the page it fits nicely onto the page.  

One last thing to add is browser background graphics, by default (on Chrome) this is not checked, this caused me issues when printing the page when it was not checked.

Add this to your print CSS to ensure that the page prints OK.

  /*

    force browsers to print background images.

    */

    body {-webkit-print-color-adjust: exact;}

    

    .t-Body-nav {

    display:none

  }