I have a bootstrap modal which contains table, and table consist of multiple pages, when i print the modal it only prints the part of modal that is unscrolled, means it looks like on printing the page JS take the screenshot of modal window. Code i tried:

@media print {
    .modal-body { 
             width: auto;
             height: auto;
             overflow: visible !important;  
    }
    
        body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; 
    }
    .modal-footer{
        visibility:hidden;
    }
    .modal-header{
        visibility:hidden;
    }
}

This is the image i obtained after using jquery printThis library

I have a bootstrap modal which contains table, and table consist of multiple pages, when i print the modal it only prints the part of modal that is unscrolled, means it looks like on printing the page JS take the screenshot of modal window. Code i tried:

@media print {
    .modal-body { 
             width: auto;
             height: auto;
             overflow: visible !important;  
    }
    
        body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; 
    }
    .modal-footer{
        visibility:hidden;
    }
    .modal-header{
        visibility:hidden;
    }
}

This is the image i obtained after using jquery printThis library

• javascript
• html
• jquery
• css

Share Improve this question Follow edited Jul 25, 2020 at 15:01 Sybghatallah Marwat asked Jul 25, 2020 at 13:33 Sybghatallah MarwatSybghatallah Marwat 31211 gold badge33 silver badges1818 bronze badges 2

• Take a look at the printThis plugin for jQuery. – Fullslack Commented Jul 25, 2020 at 14:11
• it didnt helped so much, i am attaching the photo to my question which was obtained after using printThis – Sybghatallah Marwat Commented Jul 25, 2020 at 15:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Print Bootstrap Modal Body with jQuery

Make a print function that removes everything. Then append the modal body to the main content after printing your data and append everything back where it belongs. It may not be a perfect solution if you have a more significant site, although this should be enough to figure out how to implement this in your situation.

$(document).on("click", ".print", function () {
  const section = $("section");
  const modalBody = $(".modal-body").detach();

  const content = $(".content").detach();
  section.append(modalBody);
  window.print();
  section.empty();
  section.append(content);
  $(".modal-body-wrapper").append(modalBody);
});

.modal-body-wrapper {  // Make sure that you have a wrapper.
  overflow-y: scroll;  // It allows scrolling, but the body is printed
  height: 60vh;        // in full.
}

See Demo : https://jsfiddle/hexzero/5Lzocqpn/