.NET Razor page being mangled when trying to use JavaScript window.print()

I have this razor page in my .NET application (it isn't pretty but it's what the client wanted because it looks like the reports they have been using for years)

Razor Page

However when the user clicks print it looks like this:

page when printing

As you can see, a lot of my columns are being pushed to the side of the page or rearranged for some reason. Now I'm not really a front end developer so I assume I've made some mistake when creating this page. What exactly can I do to fix this and why is it happening in the first place?

Details page

@model Roadway_History.Models.Statewide

<!--            CUSTOM CSS          -->
<link href="~/Styles/Documents/DetailsStyle.css" type="text/css" rel="stylesheet">
<!--            GOOGLE ICONS          -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

@{
    ViewBag.Title = "Details";
}

<div class="container-fluid text-center topLabel">
    <div class="borderline">
        <h4 class="title"><strong>DETAIL RECORD - RP ROADWAY HISTORY FILE</strong></h4>
        <div class="row">
            <div class="col-md-1">
                <input class="text-left" type="button" onclick="javascript:window.print()" value="Print" runat="server" />
            </div>
            <div class="col-md-11">
                <p class="text-right">
                    <u>Current Date:</u>
                    <script>document.write(new Date().toLocaleDateString());</script>
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 text-left">
            <h5><strong>COUNTY:</strong> <span class="box-shadow px-3">@Html.DisplayFor(model => model.COUNTY)</span></h5>
        </div>
        <div class="col-md-3 text-right">
            <h5><strong>District:</strong>@Html.DisplayFor(model => model.District)</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-left">
            <h5><strong>Route No:</strong><span class="box-shadow px-4">@Html.DisplayFor(model => model.RouteNo)</span></h5>
        </div>
        <div class="col-md-4">
            <h5><strong>Sign System:</strong><span class="box-shadow px-4">@Html.DisplayFor(model => model.SignSys)</span></h5>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-12 text-left">
            <h5><strong>LocalName:</strong></h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-left">
            <h5 class="box-shadow px-3">@Html.DisplayFor(model => model.LocalName)</h5>
        </div>
        <div class="col-md-8"></div>
    </div>
    <div class="row">
        <div class="col-md-2 text-right">
            <h5><strong>Supp Des:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.SuppDes)</h5>
        </div>
        <div class="col-md-2 text-right">
            <h5><strong>Method:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.Method)</h5>
        </div>
        <div class="col-md-1"></div>
        <div class="col-md-2 text-left">
            @Html.DisplayFor(model => model.Duplicate_OK)
            <label class="form-check-label" for="duplicateCheck"><strong>Duplicate OK</strong></label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 text-right">
            <h5><strong>Date:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>What date??</h5>
        </div>
        <div class="col-md-2 text-right">
            <h5><strong>Original Location:</strong></h5>
        </div>
        <div class="col-md-2 text-left">
            <h5>@Html.DisplayFor(model => model.OriginalL)</h5>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-2 text-right">
            <h5><strong>Original D:</strong></h5>
        </div>
        <div class="col-md-6 text-left">
            <h6>@Html.DisplayFor(model => model.OriginalD)</h6>
        </div>
    </div>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>DOCUMENTS</strong></h5>
    </div>
    <h6 class="text-left">TABLE GOES HERE</h6>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>PROJECTS</strong></h5>
    </div>
    <h6 class="text-left">@Html.DisplayFor(model => model.Projects)</h6>
    <div class="borderline text-left">
        <h5 class="mb-0"><strong>COMMENTS</strong></h5>
    </div>
    <h6 class="text-left">@Html.DisplayFor(model => model.Comments)</h6>
</div>

<p style="margin-top: 20px">
    @Html.ActionLink("Back to List", "Index")
</p>

DetailsStyle.css

.topLabel {
    margin-top: 50px;
}

.borderline {
    border-bottom: 4px solid #000000;
    padding-bottom: 10px;
    margin-bottom: 40px
}

.box-shadow {
    margin-top: 40px;
    box-shadow: 0.15rem 0.15rem 0.25rem #000000;
}



Read more here: https://stackoverflow.com/questions/68473788/net-razor-page-being-mangled-when-trying-to-use-javascript-window-print

Content Attribution

This content was originally published by GrillOwner69420 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: