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. =(
Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.
Change the size of the modal by adding the . modal-sm class for small modals (max-width 300px), . modal-lg class for large modals (max-width 800px), or . modal-xl for extra large modals (max-width 1140px).
The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect. The attribute role="dialog" improves accessibility for people using screen readers.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With