CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 15

How to make a div printable within a non-printable div

Using the sample code below, how I can make the div with an id="print" as the only thing printable without having to make each individual item non-printable. The goal would be leave class="d-print-none" on the "content" div but be able to make the "print" div printable.

I'd like to do this with scss so the print comes out correctly whether you're using window.print() or a browsers print function

<div id="content" class="d-print-none">
    <div>Some Text</div>
    <some-component></some-component>
    <div>Something Else</div>
    <some-other-component></some-other-component>
    <more-components></more-components>
    <div id="print">Some print stuff
        <some-print-component></some-print-component>
    </div>
    <div>More non-printable stuff</div>
    <non-printable-component></non-printable-component>
</div>

Upvotes: 0

Views: 232

Answers (1)

Wais Kamal
Wais Kamal

Reputation: 6180

Set all child elements on #content to be non-printable, except #print:

@media print {
  #content > *:not(#print) {
    display: none; 
  }
}

If #print is not directly below #content, you should do it this way:

@media print {
  #content * {
    display: none;
  }

  #content #print, #content #print * {
    display: block; /* Change as necessary */
  }
}

Or, in one rule:

@media print {
  #content *:not(#print, #print *) {
    display: none; 
  }
}

Upvotes: 3

Related Questions