How do I print the entire bootstrap modal where content in modal body is scrolled out of view

Question

The problem is that the user has to scroll down to view all of the content within the modal body. However, when I print the modal the only part that is printed is the part that is viewable. I want the entire modal's content to be printed. I have tried every piece of code on the following page and none of them print the entire modal.

Twitter Bootstrap: Print content of modal window

Have you tried increasing the modal's height to accommodate its entire content before printing? You might alternatively try changing its `overflow-y` setting to `overflow-y:visible`. — Roamer-1888, Apr 07 '15 at 06:50
@Roamer-1888 Yes I tried it after you suggested it, but I couldn't get it to print the content that was still out of view only without the scrollbar now. You got me on the right track though. I ended up using the plugin printThis by Jason Ray. — Abu Sulaiman, Apr 08 '15 at 19:19
Good detective work. Could you post an answer to your own question please, and include a link to the plugin? — Roamer-1888, Apr 08 '15 at 19:26
The height of the modal dialog for print media should be increased to allow for all the content to print. Take a look at this approach: This is an approach using CSS classes. http://www.ozkary.com/2015/06/angularjs-print-bootstrap-modal-content.html — ozkary, Jul 01 '15 at 23:13

score 23 · Answer 1 · answered Jun 29 '16 at 17:17

23

Was facing the same issue with angularjs UI bootstrap library. Tried the link provided above but no luck. The only CSS that works for me when the modal is LONGER than the view port is:

@media print {
    .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        overflow: visible!important;
    }
}

Note: position:absolute and overflow:visible are MUST have. Hope this could also solve your problem when printing angularUI-Bootstrap-Modal.

answered Jun 29 '16 at 17:17

LeOn - Han Li

9,388
1
65
59

1

This is the only thing that worked for me. I tried many jQuery and straight up JavaScript and lots of CSS. Thanks. – johnny Mar 16 '17 at 20:51
Seriously beautiful solution – bkwdesign Oct 05 '17 at 14:40
This is a great solution, but in IE&EDGE page background is still visible – no id Jul 11 '19 at 03:48
note: this will **not** work if you have `modal-dialog-scrollable` on your `modal-dialog` like the second one mentioned [here](https://getbootstrap.com/docs/4.3/components/modal/#scrolling-long-content) – Anand Rockzz Aug 15 '19 at 21:05

score 14 · Accepted Answer · answered Apr 08 '15 at 19:41

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Wrap the content you want to print with the following div. Everything outside of this div will not be printed.

<div id="modalDiv">
    ..content to print..
</div>

Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: false,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});

I used this, it opens the print window but not show any thig? any idea about this? — Zia Yamin, May 10 '21 at 10:32

score 10 · Answer 3 · answered May 16 '16 at 21:35

10

I think you can easily do that with CSS using @media print:

If there is opened bootstrap modal window, will be printed content of modal (it can be more than one page), in other case content of window.

@media print {
    /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; /* make visible modal body and header */
    }
}

Also you can add button on footer of modal for printing:

<div class="modal-footer">
    <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
</div>

answered May 16 '16 at 21:35

Taron Saribekyan

1,360
7
13

1

worked like a charm, most methods I saw were either too much for my use case or too long to implement! – Bernard 'Beta Berlin' Parah Jan 09 '17 at 18:11
it works, but it is displayed as XS settings instead of lg settings (it is displayed as one column per row instead of two columns per row as I see in the screen). Is there any way to print exactly what I am seeing? – Francisco G Aug 30 '17 at 16:53
@FranciscoG It means some style (e.g. for lg settings) writed under `@media screen` instead of `@media all` (which is default @media type). – Taron Saribekyan Nov 24 '17 at 20:40

score 1 · Answer 4 · answered Dec 19 '19 at 10:37

http://plnkr.co/edit/fspygnqWhsosqDTds0Og?p=preview

/**Modal Styles for Print**/

        @media print {
          body * {
            visibility: hidden;
          }
          #print-content * {
            visibility: visible;
            overflow: visible;
          }
          #mainPage * {
            display: none;
          }
          .modal {
            margin: 0;
            padding: 0;
            min-height: 550px;
            visibility: visible;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
            position: relative;
          }
          .modal-dialog {
            visibility: visible !important;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }

score 0 · Answer 5 · answered Oct 30 '17 at 08:46

@Abu Sulaiman: Using this still prints out only the part showing in the modal. To also show the hidden part especially when your content is overflow, change the removeInline: truejust as done below. Works fine for me.

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Wrap the content you want to print with the following div. Everything outside of this div will not be printed.

..content to print..

Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: true,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});

How do I print the entire bootstrap modal where content in modal body is scrolled out of view

5 Answers5

Linked