Tuesday, 14 March 2017

XPages Tip: Hide Elements from Printing on an XPage using CSS



For an XPages project I was asked whether it was possible to print only the viewPanel on an XPage and not all other elements such as an iframe and a widgetContainer by making use of a print button with a simple window.print() function. A good practice in this case is to use a style sheet specifically for printing and and set it's media attribute to print.

<xp:styleSheet href="/print.css" media="print"></xp:styleSheet>

Using the CSS @media rule it is very easy to initially add a class 'no-print' with display:none !important. This class can then be used to hide the elements which should not be printed.
To hide the header and footer which contains the page title, file path, page number and date @page can be used with the setting 'margin:0'. Since the contents will extend to page's limits, the page printing header/footer will be absent. in this case some margins/paddings in the body element should be set so that the content won't extend all the way to the page's edge. This works in Chrome and Firefox but not in Internet Explorer.
To avoid additional print-out of link information in the output the last rule in the CSS file below can be added to the @media print section:

The CSS file looks like this.

@media print
{  
    .no-print, .no-print *
    {
        display: none !important;
    }
}
@page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
    body { margin: 1.0cm; };
}
a:link:after, a:visited:after {
    content: "";
}

On the XPage it is now possible to use the class 'no-print' to 'hide' the specific element from printing.

<div class="no-print">
<xp:panel>  
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/O3Xfd3Xyz8g?autoplay=1;controls=0;loop=1;playlist=O3Xfd3Xyz8g"
frameborder="0" allowfullscreen="">
</iframe>
</div>

The above is a quick solution by making use of a stylesheet on the XPage.

No comments:

Post a Comment