Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 600
Abu Sulaiman Avatar asked Apr 07 '15 01:04

Abu Sulaiman


People also ask

How do I make my modal body scrollable?

Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

How do I make Bootstrap modal visible?

Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .

How do you make a Buttonal modal appear?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How do I enable scrolling in modal?

Use the . modal-dialog-scrollable class to enable scrolling inside the modal.


2 Answers

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.

like image 55
LeOn - Han Li Avatar answered Oct 17 '22 01:10

LeOn - Han Li


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          
}); 
like image 36
Abu Sulaiman Avatar answered Oct 17 '22 02:10

Abu Sulaiman