Hide elements when pritning the web page

When it comes to print a given web page, there may be things that we do not wish to appear in the print preview or when the page is actually printed. There are few ways to solve this issue.

1. Write print specific page and redirect to that page on print.
2. Use CSS to hide elements on print.

Here I am going to show how we are going to achieve this using CSS.

1. Write a class for non printing items in your CSS file (such as. .no-print)
2. The class definition would be similar to shown below.

/*use media query to style page when printing*/
@media print
{
    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }


/*removes href values when printing */
    a[href]:after {
    content: none !important;
  }
}

3. Refer the class in the elements that needs to be hidden

e.g.

• Hyper link and image

<a href="http://domain.com/link" target="_blank" class="no-print">
                                            <img  class="no-print"     src="~/Content/Styles/_Default/image.png" height="20" width="20">
                                        </a>

• Button 
  <input type="button" value=Apply" class=" no-print" />

Cheers,
Samitha