cognitom / paper-css

Paper CSS for happy printing
https://www.npmjs.com/package/paper-css
MIT License
2.51k stars 342 forks source link

Print size problem #42

Open tuperhero opened 4 years ago

tuperhero commented 4 years ago

Hi. Great snippet. Might be missing something though, when printing a page using the A4 style, it comes out about 2/3 of the size of the page. Tried across multiple browsers and OS. Any ideas ?

andersou commented 4 years ago

Hi @tuperhero , i did some tests and found the problem. Libraries like bootstrap set min-width in body to 992px (what makes the overflow), try this (defined after bootstrap and styles in head):

<style>
      @page {
        size: A4;
        margin: 0;
      }
      body {
        min-width: initial !important;
      }
</style>

worked for me :wink:

tuperhero commented 4 years ago

@andersou wow that worked like a charm. Thanks so much I spent ages trying to figure it out, didn't even occur to me that Bootstrap could be getting in the way. Cheers !

mrevening commented 3 years ago

This one helped me

<style>
      @page { size: A4; }
      @media (min-width: 576px) {
        .container, .container-sm {
          max-width: initial;
        } 
      }
</style>
n8green commented 2 years ago

I'm seeing this issue despite not using any other CSS framework, and nothing I do seems to make any difference. Any pointers on things I should be specifically looking at?