CODEWITHSUNDEEP
htmlcssprinting
Questifer
Questifer

Reputation: 1133

Print contents of scrollable div

I have a contract that is being displayed in a scrollable div. I'd like to give my users the ability to print the contents of the scrollable div. The div is roughly three pages long. I'm using bootstrap for this application and have tried the 'visible-print' css class available to me. When I test the print functionality now, only what's in the top of the scrollable div is displayed in the chrome print preview screen with a vertical scrollbar and it cuts off the remaining content.

CSS:

#scrollableDiv{
  width: 100%;
  height: 700px;
  overflow-y: scroll;
}

@media print,
 (-o-min-device-pixel-ratio: 5/4),
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 120dpi) {
}

@media print {
* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  .visible-print {
    display: block !important;
    overflow: visible;
  }
}

HTML:

<div id="scrollableDiv" class="margin-bottom-20">
    <div class="visible-print">
        <!-- CONTRACT CONTENTS HERE -->
    </div>
</div>

Upvotes: 3

Views: 21227

Answers (4)

Daniel Baettig
Daniel Baettig

Reputation: 1

This problem has just nagged me for a few hours: Ensure that in your CSS instructions #scrollableDiv and .visible-print are defined BEFORE you re-define them under the @media print section, otherwise it will not work.

Upvotes: 0

John Linton
John Linton

Reputation: 309

Sun_Sparxz's answer above is solid enough, but I would add a tricky issue you may run into...

After a few hours I realized I had a 'position:fixed' in my body tag which was preventing the above solution from working. Make sure you remove that or your print logic may not work. Once I did, the media tag operated as expected.

Upvotes: 1

Kevin Brown
Kevin Brown

Reputation: 8877

While this is not the exact answer to your solution, you could look at this sample:

http://www.cloudformatter.com/CSS2Pdf.CustomTipsTricks.ContinuedTableHeaders

The table in that sample inside a scrollable area and the whole table renders to PDF. We developed this solution for rendering to overcome many of the limitations in a simple browser-based print.

Upvotes: 1

Josh
Josh

Reputation: 1049

Try this 

  @media print {
                 #scrollableDiv{
                  width: 100%;
                  height: 100%;
                 }
               .visible-print{
                 display: block;
                 width: auto;
                 height: auto;
                 overflow: visible;  
                }
               }

Upvotes: 3

Related Questions