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

javascript jquery twitter-bootstrap printing bootstrap-modal
Abu Sulaiman picture Abu Sulaiman · Apr 7, 2015 · Viewed 34k times · Source

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

Answer

LeOn - Han Li picture LeOn - Han Li · Jun 29, 2016

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.

Related questions

How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form. <form id="myform" class="form-wizard"> <h2 class="form-wizard-heading"&…

Read More
Passing data to a bootstrap modal

I've got a couple of hyperlinks that each have an ID attached. When I click on this link, I want to open a modal ( http://twitter.github.com/bootstrap/javascript.html#modals ), and pass this ID to the modal. I …

Read More
The data-toggle attributes in Twitter Bootstrap

What does data-toggle attributes do in Twitter Bootstrap? I couldn't find an answer in Bootstrap API. I have seen a similar question before as well, link. But it didn't help me much.

Read More