Search code examples
angularjsangular-ui-bootstrapangular-bootstrap

Printing a Bootstrap Modal page with contents larger than 1 page results in cut off in Google Chrome

Trying to get printing to work for Modals.

In the latest Google Chrome and using the latest angular-ui-bootstrap 0.14.2, we have problems getting large contents like list or tables to overflow to the next page.

I have already done the necessary changes to hide the background objects: Add the following style into the modal page:

@media print {
      body * {
        visibility: hidden;
      }
      #print-content * {
        visibility: visible;
        overflow: visible;
      }
      #mainPage * {
        display: none;
      }
      .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        min-height: 550px;
      }
      li {
        page-break-after: auto;
      }
    }

Any one has a quick fix?

Plunker: http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR?p=preview

You test out the Print preview for different modal and the Print buttons. Print preview works OK for current page, but not modal. =(

Solution

  • I have found the issue offending problems with visibility and overflow attributes in the CSS.

    @media print {
  .modal {
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

    Go to the updated plunkler: http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR?p=preview Click Large Modal with 50 items and click Print and you have the contents nicely flow to the second page. NICE!

    Printing Modal with overflow issue: enter image description here

    Printing Modal after fixing overflow Issue: enter image description here