52

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.

11 Answers 11

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.

2
  • 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 2, 2009 at 21:10
  • 1
    @FatherCarbon - that's what I've just implemented and it looks like it'll do the trick nicely Mar 28, 2014 at 22:08
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?

11
html body * {
 display:none;
}

#printableArea {
 display:block;
}

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

1
  • 31
    This will only work if #printableArea is a direct child of body. Apr 9, 2010 at 4:01
11

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

3
  • 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? Feb 21, 2021 at 6: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, 2021 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. Feb 25, 2021 at 17:01
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;
}
4
  • this didn't hide everything else on my 1st try.
    – johny why
    Apr 28, 2018 at 22:41
  • 1
    I can't scroll down or up !
    – Salem
    Aug 30, 2020 at 13:18
  • 1
    @Salem WOW! What kid of paper are you printing on?
    – Tarek Adam
    Sep 7, 2020 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 8, 2021 at 18:26
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;
3
  • this action will replace the entire HTML, not a required result Mar 11, 2013 at 14:37
  • 1
    it's also likely to break things.
    – Kyle Baker
    Apr 26, 2018 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, 2018 at 22:40
1

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.

1
@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).

1

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.

0

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.