CSS: print long div inside modal, no second page in IE - css

Question

I'm working on a new version of the project and I'm having some problems with the print CSS style.
here the old project:
https://www.traffwebdemo.co.uk/parking/main.html
STEPS TO PRINT:
Click on the wrench button -> printer button -> choose the template, a modal will open and then you can print on both orientation, it's done with an iframe and a mix of 2 css, one in the main project and one in the iframe itself.
the css print hide everything and show just the modal content when it print, so if you try to print directly on the main page you will have just a white page.
I'm not working anymore with the iframe due to limitation with the map, i'm still calling the html template but then I'm cloning the body of it in the modal and get rid again of the iframe.
here the new version:
https://www.traffwebdev.uk/parking/test.html
Both version of the project use Bootstrap but while the old version calls an iframe and I print the iframe bootstrap is not loaded, the new way get rid of the iframe so Bootstrap is interfering with the print.
I was having problem with the orientation field in Chrome and no second page in all the other browsers but after digging into Bootstrap issues I found that this can be solved overwriting the CSS rule with
#page {
size: auto
}
.flex-class {
display: block;
}
Now I have second page in Firefox and Opera but...sadly our clients use IE11... and I don't have second page in IE
How can I print both pages in IE? It seems that these rules are completely ignores.
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
UPDATE
I've applied display: table to the main div that contain the 2 pages and now I can print in IE but not in FF.

Answer 1

Just make your model's position as relative.
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;
}

Answer 2

I manage to fix the problem with the code below, #printMod is the bootstrap modal itself, i remove any flex property and float.
Then I've applied display: table to #printMod and #printBody, this last one is the main container inside the .modal-body modal element.
Quite a long work to fix it and just because of Bootstrap.
#media print {
#page {
size: auto;
}
body {
margin:0 !important;
padding:0 !important;
height:100% !important;
width: 100% !important;
}
body * {
visibility: hidden;
}
#printMod,
#printMod * {
visibility: visible;
float: none;
display: block;
flex: none !important;
}
#printBody {
display: table !important;
margin: auto !important;
}
#printMod {
& {
display: table !important;
position: absolute;
left: 0;
top: 0;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
break-inside: auto;
border: none !important;
overflow: visible !important;
}
.modal-header,
.modal-footer {
display: none;
border: none !important;
}
.modal-dialog,
.modal-content,
.modal-body {
display: block;
overflow: visible;
height: 100% !important;
max-height: 100% !important;
padding: 0;
border: none !important;
}
#plwrapper,
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
}
}