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

Question

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. =(

Answer 1

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:

Printing Modal after fixing overflow Issue:

Answer 2

Using bootbox dialog. Added print button.

The answer above is too complicated. I got my modal eventually to print whole table of any number of rows from 4 to about 500. The problem is where to set the information.
To overide the boostrap css use !important.

to show entire modal
set modal overflow visible;

to position at top
set modal position absolute; top 0; left 0;

to make background not visible:
modal dialog: make width 100%; set margin 0;
set backdrop to solid (opacity 1) white;

js:

$modal = bootbox.dialog({
            title: title,
            message: report_table_html,
            className: 'modal-full',
            buttons: {

                print: {
                    label : '<i class="fa fa-print"></i> Print',
                    className: "btn-default hide-print print",
                    callback: function(result) {
                        window.print();
                    }
                },
                main: {
                    label: "Done",
                    className: "btn-default hide-print"
                }

            } 

css:

.modal-full .modal-dialog {
     width: 90%;
}

@media print {
    .modal,
    .modal * {
        overflow: visible !important;
    }
    .modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    .modal-dialog {
        width: 100% !important;
        margin: 0;
    }
    .modal-backdrop {
        background-color: white;
        opacity: 1 !important;
    }
}

Answer 3

It is not full proof as if the parent div is more than 1 page, you can see blank pages in your modal printout. I am working on fixing that. Will post it soon.

[https://jsfiddle.net/ozkary/3zu008ch/][1]

  [1]: https://jsfiddle.net/ozkary/3zu008ch/

Answer 4

I have found @cainhs solution is perfect but there is 2 issues

1. As JD Smith said you may get extra blank page
2. Print get worst if you scale up the print.

To fix both issue

You need to put height : auto , and width : auto in your @media print {}

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

Answer 5

You can enable this option [Background graphics] to see what is extra printed on your page. Hope this helps to find out the root cause.