javascripthtmlcsstwitter-bootstrapmicrosoft-edge

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

enter image description here

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.

enter image description here

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 ?

Solution

  • 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.