How to hide content on printing with MVC and Javascript?

Question

The title is obvious i think. This is where i got some infos :

Provide Print functionality in ASP.NET MVC 4

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

first, css :

@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

so, in my cshtml :

<td style="max-width: 100px;"><a href="javascript:window.print()" class="btn btn-default">Print</a>

and now things i don't want to print :

<div style="top:120px;left:10px;position:absolute;" class="no-print"></div>

I also tried class="noPrint"

All's good, exept in the preview before printing i still see my menu...so i guess it WILL be printed... I use chrome.

Any idea ?

Andrew Locklair · Accepted Answer · 2016-12-07 21:52:28Z

1

With the information you've provided, I can't see any reason why the print media queries wouldn't execute and prevent the menu from being printed. Take a look at the fiddle that exposes this markup:

<td style="max-width: 100px;">
  <a href="javascript:window.print()" class="btn btn-default">Print</a>
</td>

<div style="top:120px;left:10px;position:absolute;" class="no-print">
  Won't print this!
  <span>Or this!</span>
</div>

It shows the basic elements you provided, and printing appears to hide the elements correctly.

Could you provide a little more detail? Maybe something else is going on that's exposing those elements or maybe the CSS hasn't been saved- something along these lines.

answered Dec 7, 2016 at 21:52

Andrew Locklair

587 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Antoine Pelletier Over a year ago

css not saved... i'm lame

Andrew Locklair Over a year ago

Not lame at all - better to find out than to waste time in CSS docs!

Antoine Pelletier Over a year ago

Sure, at least you lightened me

Antoine Pelletier Over a year ago

Ho no wait, it also make my menu disapear while i'm navigating !

Andrew Locklair Over a year ago

Strange - is your application locally hosted? Are there any other CSS selectors targeting those elements?

|

Dharman · Accepted Answer · 2020-09-24 17:48:30Z

1

I think this question may have to do with conflicting '@' symbols. I saw in another SO post they talked about the @@ over-ride and said it needed a space after the double @@. For me, that didn't work with the space, but this worked:

    <style>
        @@media print
        {
            .no-print { display: none !important; };
        }
    </style>

I then added the .no-print class where it was needed.

edited Sep 24, 2020 at 17:48

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 24, 2020 at 17:43

Brian Tremelling

456 bronze badges

1 Comment

Kevin Uchiha Over a year ago

hmm, is this supposed to be in the "CSS" file? Why is there HTML syntax?

Collectives™ on Stack Overflow

How to hide content on printing with MVC and Javascript?

2 Answers 2

9 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related