Html Question posted in
Some basic documentation can be found here.

HTML/CSS – Ignore Shared Layout when Printing

I’m currently building a page where only a particular section needs to be printed (which I am able to do via my print CSS). The issue that I’m running in to is that I am required to use a shared layout. This layout is still affecting the print even-though I have been able to disable the content from displayed on the print-preview. To clarify, what I want printed is the only thing printing but because of the share layout it is being shrunk to about 70% of it’s original size. I know the shared layout is causing this issue since it prints properly if I remove the shared layout when rendering the page.

Is there a way to update the Print CSS to ignore the shared layout?

My "@media Print" is as follows:

@media print {
    @page {
        size: letter portrait !important;
        margin: 0 !important;
    }

    header,
    footer {
        display: none;
    }

    body {
        visibility: hidden;
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }

    #do-not-print {
        display: none;
        visibility: hidden;
    }

    #section-to-print {
        visibility: visible;
        position: absolute;
        margin: 0;
        top: 0 !important;
        left: .25in;
        width: 8in !important;
        min-height: 10in !important;
    }

Thanks for any assistance that can be provided.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So, I finally got it working but not in the way I'd like. I added the following to my @media Print to override the shared layout's applied css - note none of the following classes are specifically referenced or created on my page.

    body,
header,
footer,
.site-header-flex,
.site-container-main,
.site-nav-container-outer,
.site-nav-container-outer-flex,
.site-nav-container {
    width: 0px !important;
    min-width: 0px !important;
    max-width: 0px !important;
}

    FOLLOW-UP QUESTION:

    Instead of having to inspect the print and figure out what is affecting it, is there a way to just tell the @media Print to only use a specific style sheet instead of what is being used to render the page (or omit certain style sheets from the print that are being used to render the page)?


  2. 0

    I unfortunately can’t comment with this account, so this answer will only be partially helpful. I would prefer to comment to ask for you to actually upload your whole project or at least a snippet of it because "shared layout" isn’t exactly a common term, so I’m not totally sure what you mean.

    I believe what you’re running into is essentially that you have the content you want to print within a whole fancy layout on the page, and you want to disable all the fancy styling and only print (essentially) the information within a certain section. There are two ways to achieve this.

    First, it’s kind of a lame solution: duplicate the section that you want to print, set the parent container to display:none except on the @media print query. Style that however you’d like. Set the main parent container to display:none in the media query. You’ll end up with two versions of the same content, but 1 of those versions will always be completely hidden.

    The second option, which is the more technically proficient option but more work, is that you can wrap all of your non-print styling in a @media only screen query. That will disable all styling except your print styling. Here’s an example: https://jsfiddle.net/sydneymvo/Lkqu0gwr/4/ you can right-click on the page and select print to see it in action

    @media only screen {
  .print {
    background: wheat;
    padding: 1rem;
  }

  .no-print {
    background: lightblue;
    padding: 1rem;
  }
}

@media print {
  .print {
    background: white;
    padding: 4rem;
    border: 10px solid red;
  }
  .no-print {
    display: none;
  }
}
    <div class="print">
  <h1>hello world</h1>
</div>
<div class="no-print">
  <p>This shouldn't print</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search