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 ?

score 1 · Accepted Answer · answered Dec 07 '16 at 21:52

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 07 '16 at 21:52

Andrew Locklair

48
7

1

css not saved... i'm lame – Antoine Pelletier Dec 07 '16 at 21:55
1

Not lame at all - better to find out than to waste time in CSS docs! – Andrew Locklair Dec 07 '16 at 21:59
Sure, at least you lightened me – Antoine Pelletier Dec 07 '16 at 22:00
Ho no wait, it also make my menu disapear while i'm navigating ! – Antoine Pelletier Dec 07 '16 at 22:02
Strange - is your application locally hosted? Are there any other CSS selectors targeting those elements? – Andrew Locklair Dec 07 '16 at 22:06
localy hosted yes, does it cahnges anything? – Antoine Pelletier Dec 08 '16 at 13:51
Because live on the server it dosen't show the menu either – Antoine Pelletier Dec 08 '16 at 14:08
I don't think it would change anything. Could you provide a link to the live site potentially? It may be difficult to find out what's going on, I think maybe some other element is being hidden in your CSS. – Andrew Locklair Dec 08 '16 at 16:47
This didnt work for me in my own application. Should i just put the "@media" thing at the end of the css file? Or does it need to be in some kind of scope or something? – morknox Nov 22 '22 at 12:55

score 1 · Answer 2 · edited Sep 24 '20 at 17:48

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 '20 at 17:48

Dharman

30,962
25
85
135

answered Sep 24 '20 at 17:43

Brian Tremelling

35
6

hmm, is this supposed to be in the "CSS" file? Why is there HTML syntax? – morknox Nov 22 '22 at 12:41

How to hide content on printing with MVC and Javascript?

2 Answers2