fokwabest
Member
- Joined
- Aug 18, 2023
- Messages
- 6
- Programming Experience
- 5-10
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 formatted properly. See screen shots below:
On Chrome - (User right click from bottom of page)
You can see the title of the app, title of the report, report run date etc
On MS Edge - (User right click from bottom of page)
The preview starts at some random data as shown below. Title of the app, title of report etc are not shown in the preview and printed version.
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:
Below is the content of mycss.css
What can I do to get this to work properly on MS Edge ? Is it a CSS issue ?
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 formatted properly. See screen shots below:
On Chrome - (User right click from bottom of page)
You can see the title of the app, title of the report, report run date etc
On MS Edge - (User right click from bottom of page)
The preview starts at some random data as shown below. Title of the app, title of report etc are not shown in the preview and printed version.
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:
HTML:
<!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
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 ?
