I have a strange issue I am experiencing with a web app. Typically, the user right clicks on the web page and click Print. He views the document in preview and then decides how to print it.
On Chrome, everything works fine
On Microsoft Edge, It only works if you right click the web page at the top of the page. If you scroll down to the bottom of the page before you right click and select print, the printed document is not formatted properly. The print preview is also not proper. See screen shots below:
On Chrome – (from bottom of page)
On MS Edge – (from bottom of page)
As you can see from the above screen shots, Chrome is displayed properly. MS Edge only displays like that if I right click on the web page from the top of the page without scrolling down
Below is my code sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Physician Activity Report</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
<link href="~/css/mycss.css" rel="stylesheet" media="print" />
</head>
Below is the content of mycss.css
@media print {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666666666666%;
}
.col-md-10 {
width: 83.33333333333334%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666666666666%;
}
.col-md-7 {
width: 58.333333333333336%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666666666667%;
}
.col-md-4 {
width: 33.33333333333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.666666666666664%;
}
.col-md-1 {
width: 8.333333333333332%;
}
}
h5 {
color: darkblue;
}
What can I do to get this to work properly on MS Edge ? Is it a CSS issue ?