Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS to support printing Bootstrap 4 Alpha modal
@media print {
.modal-open {
overflow: auto;
}
.modal-open .container {
display: none;
}
.modal-backdrop,
.modal {
position: static;
bottom: auto;
}
.modal-content {
top: 0;
left: 0;
margin: 0;
padding: 15px;
border: none;
}
.modal-header button.close {
display: none;
}
/* hacks below resolve issues with block display of .modal-content
in browsers other than chrome (and maybe safari)
(see https://browserstrangeness.github.io/css_hacks.html) */
/* ie hack */
.modal-content {
display: inline\0; /* not a typo */
}
/* firefox hack */
@-moz-document url-prefix() {
.modal-content {
display: inline;
}
}
/* edge hack */
@supports (-ms-ime-align:auto) {
.modal-content {
display: inline;
}
}
/* display: flex causes print problems in most browsers */
.row {
display: inline;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.