Print and Print Preview of Web Page not Working Properly in Microsoft Edge Browser
-
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 Report Issue - Chrome.PNG - Google Drive[^] 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. Report Issue - MS Edge.PNG - Google Drive[^] 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:
Physician Activity ReportBelow 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.333333 -
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 Report Issue - Chrome.PNG - Google Drive[^] 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. Report Issue - MS Edge.PNG - Google Drive[^] 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:
Physician Activity ReportBelow 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.333333 -
No idea what the answer is but I did upvote the question because someone down voted it and without explanation. Seems like a reasonable question to me. Perhaps they wanted you to post in a different forum but didn't feel like explaining that.
Yeah. It is a strange issue that our users recently brought up. Most users use MS Edge. I don't know what angle to analyze from. It is a .NET Core web app.
-
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 Report Issue - Chrome.PNG - Google Drive[^] 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. Report Issue - MS Edge.PNG - Google Drive[^] 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:
Physician Activity ReportBelow 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.333333I use Edge as a secondary browser when Firefox fails to display a dark background with light foreground because it (Edge) and it's settings remain at default. Nothing there in a contextual right-click and print (apparently CTrl+P also) fails when the target format is .PDF; so I suggest ... printing from the saved .pdf document instead of printing to .png.
-
I use Edge as a secondary browser when Firefox fails to display a dark background with light foreground because it (Edge) and it's settings remain at default. Nothing there in a contextual right-click and print (apparently CTrl+P also) fails when the target format is .PDF; so I suggest ... printing from the saved .pdf document instead of printing to .png.
Hi @RedDK, thanks for your input. Yeah CTrl+P also fails. Like I said in the question even the generated PDF is not formatted properly for MS Edge. Why is it that it works if I right click and click print from the top of the web page but as soon as I scroll down and do the same action it doesn't work in MS Edge ? What can I do to fix it ? What code do I need to add? Why don't I experience same issue in Chrome?
-
Hi @RedDK, thanks for your input. Yeah CTrl+P also fails. Like I said in the question even the generated PDF is not formatted properly for MS Edge. Why is it that it works if I right click and click print from the top of the web page but as soon as I scroll down and do the same action it doesn't work in MS Edge ? What can I do to fix it ? What code do I need to add? Why don't I experience same issue in Chrome?
-
Perhaps your reticense to post actual code instead of showing images through links is what's keeping me from seeing what could possibly be wrong here. I can right-click and Print this as-is ... with no difficulties.
I found the answer: It's a known issue in Edge version 126. The fix has been included in Stable 126.0.2592.81, which had been released on June 27, 2024. Please install the latest Edge Stable version 126.0.2592.81 (Official build) and test again.