Hide all elements except one div for print view

Question

I have the following CSS for my print style:

* {
 display:none;
}

#printableArea {
 display:block;
}

I expected this to hide all elements, and only show the printableArea, however everything gets hidden. In print view, all I get is a blank page.

I have it included properly in the HEAD, with media="print" on this particular stylesheet.

score 35 · Accepted Answer · answered Oct 02 '09 at 20:56

35

If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

* matches the <html> element, so the entire document is hidden.

You need to be more selective about what you hide.

answered Oct 02 '09 at 20:56

Quentin

914,110
126
1,211
1,335

1

Ah, thanks! I guess I could just place printableArea outside of the page wrapper, then hide the wrapper, showing the print div. – mathiscode Oct 02 '09 at 21:10
1

@FatherCarbon - that's what I've just implemented and it looks like it'll do the trick nicely – Michael12345 Mar 28 '14 at 22:08

score 27 · Answer 2 · edited May 23 '17 at 12:10

27

You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.

See Print <div id=printarea></div> only?

edited May 23 '17 at 12:10

Community

1
1

answered Feb 02 '16 at 23:58

Charles Offenbacher

3,094
3
31
38

score 11 · Answer 3 · answered Oct 03 '09 at 08:33

11

html body * {
 display:none;
}

#printableArea {
 display:block;
}

Also, you may need an !important on #printableArea, but probably not.

answered Oct 03 '09 at 08:33

PHLAK

22,023
18
49
52

31

This will only work if #printableArea is a direct child of body. – Bennett McElwee Apr 09 '10 at 04:01

Salix · Answer 4 · 2022-05-25T20:46:03.997

10

Answering because I found this question while searching for this

Instead of 'display: none' you can use :

* {
  visibility: hidden;
  margin:0; padding:0;
}

#printableArea * {
  visibility: visible;
}

source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa

edited May 25 '22 at 20:46

answered Mar 27 '20 at 19:41

Salix

1,290
9
15

2

This works but how do you make it so the `#printableArea` moves to the top left of the paper instead of retaining it's position in the HTML/CSS structure retained by using `visibility:hidden`? – Dawson Irvine Feb 21 '21 at 06:20
I did not have that issue when removing margins and padding. Altho, if you want it to the left, make sure it's aligned to the left? You coud always make it float or change it's position to absolute. Also, if you follow the link, someone uses `display: none` on specific classes. The issue here is that if you do it on `*` selector t will hide everything, including what you want tp print. – Salix Feb 23 '21 at 23:10
Using `display: none` on certain classes is what I eventually ended up doing. It's not as "universal" as I would prefer but it will work for the time being. – Dawson Irvine Feb 25 '21 at 17:01

score 8 · Answer 5 · edited May 15 '16 at 17:59

8

You might try popping it up on top of everything. This solved 90% of my problems, then I just had to make a .noprint class and add it to a few straggling elements.

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}

edited May 15 '16 at 17:59

Paul Roub

36,322
27
84
93

answered Dec 09 '15 at 18:23

Tarek Adam

3,387
3
27
52

this didn't hide everything else on my 1st try. – johny why Apr 28 '18 at 22:41
1

I can't scroll down or up ! – Salem Aug 30 '20 at 13:18
1

@Salem WOW! What kid of paper are you printing on? – Tarek Adam Sep 07 '20 at 17:38
1

If you are printing something that spans wider or taller than the paper, it will not print on to the next page. – Philll_t Sep 08 '21 at 18:26

score 5 · Answer 6 · answered Jan 18 '11 at 14:59

5

If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

answered Jan 18 '11 at 14:59

Chad

3,159
4
33
43

this action will replace the entire HTML, not a required result – Shlomi Schwartz Mar 11 '13 at 14:37
1

it's also likely to break things. – Kyle Baker Apr 26 '18 at 23:31
1

Worked for me right out of the box, with no problems. Same site caused issues for the CSS methods offered. One of the simplest methods offered. – johny why Apr 28 '18 at 22:40

score 1 · Answer 7 · edited Apr 20 '19 at 18:49

make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.

I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.

score 1 · Answer 8 · answered Aug 30 '20 at 14:44

@media print {
    * {
        visibility: hidden;
    }

    /* Show element to print, and any children he has. */
    .svgContainer, .svgContainer * {
        visibility: initial;
    }
}

Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).

score 0 · Answer 9 · answered Mar 18 '18 at 23:06

There is a one-line solution:

With JQuery

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

Without JQuery

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

In both examples, set the selector variable to the selector you want. For example, div#page:hover or p.class1,p.class2

score 0 · Answer 10 · answered Nov 20 '21 at 04:51

Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page

<style type="text/css" media="print">
    img
    {
        display:none;
    }
    .hide
    {
        display:none;
    }

</style>

Jaruzel · Answer 11 · 2021-12-08T11:06:41.630

0

There is another clean way to achieve this:

* {
    visibility: hidden;
}

#printableArea {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.

edited Dec 08 '21 at 11:06

answered Dec 03 '21 at 14:34

Jaruzel

99
1
7

Hide all elements except one div for print view

11 Answers11

Linked

Related