0

I have a web page (Angular html5, css3, mvc made) and it has some contents in it. User can print it (There is no separate print button but one can right click and choose print). Now, it prints the contents, but along with the content, it also print the heading or content of a chat link (Small pop up box which opens when you click on that). I don't want the heading or contents of this lightbox to be printed, which is the case in IE, Firefox, but in Chrome it prints the lightbox contents too :(

On my search, I found this, helps me, but I dont know where to use the no-print class as I do not have a separate print button or functionality in my code.

How do I hide an element when printing a web page?

Please help

Community
  • 1
  • 1
Jasmine
  • 5,186
  • 16
  • 62
  • 114

1 Answers1

1

You apply the no-print class to the elements you want to hide when a user prints, such as your chat popup.

<header class="no-print">
    <h1>My app</h1>
</header>
<p>Content</p>
<div class="no-print">
    <h1>Chat popup</h1>
</div>

The content would print, but the header and chat dialog would not.

kicken
  • 2,122
  • 14
  • 17