Tips for printing a page to match its on-screen appearance

I am in the process of developing a scheduling page within ASP.NET Web Forms, incorporating custom CSS. I have successfully added a print button, but when I try to print the page, the CSS styles are not being applied. How can I resolve this issue?

This is the current layout of my schedule:

https://i.sstatic.net/vC391.png

Here is how the page currently appears when printed:

https://i.sstatic.net/RdktC.png

Below is an excerpt of the CSS code:

.board-layout {
    background-color: #173F5F;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    display: grid;
    grid-gap: 6px;
    padding: 6px;
    width: 100%;
    height: auto;
    border-radius: 6px;
    overflow: auto;
    box-shadow: 0 3px 0 rgba(9,30,66,.25);
    border: 3px solid black;
    transition: all .2s ease-in-out;
}

...(rest of CSS code)...

If you experience issues with the CSS not being applied, ensure that the CSS file is linked correctly on the page:

<link rel="stylesheet" href="Content/CustomCSS.css" type="text/css">
cssasp.netprinting

Answer №1

Upon reevaluation, I realized that I implemented media styles:

@media print {
    *                           {   color:#333; }
    html                        {   height:auto; }
    h1:before                   {   content:"Site Name - "; }
    .pageTitle                  {   font-size:20pt; }
    #selectedTitleWrapper       {   text-align: left !important; }
    .mainContentColumn          {   margin-bottom: 0; }
}

These specific styles are tailored for printing purposes and take precedence over existing styles. Feel free to experiment with different options. For instance, eliminate the scroll bar in the top row by adding:

.container { overflow-x: hidden; } /* as an example. */

Answer №2

I recently discovered a fantastic tool called html2canvas, which can transform any element or entire webpage into an image. By implementing the following JavaScript code, I was able to create an exact duplicate of my schedule:

function customPrint() {
    document.getElementById('scheduleArea').style.maxHeight = 'max-content';
    html2canvas(document.querySelector("#scheduleArea")).then(canvas => {
        document.body.appendChild(canvas)
    }).then(() => {
        let canvas = document.querySelector('canvas');
        canvas.style.display = 'none';
        let image = canvas.toDataURL("image/png");
        let tWindow = window.open("");
        $(tWindow.document.body)
            .html("<img id='Image' src=" + image + " style='width:100%; height:auto;'></img>")
            .ready(function () {
                tWindow.focus();
                tWindow.print();
            });
        document.getElementById('scheduleArea').style.maxHeight = '800px';
        document.body.removeChild(canvas);
    });
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A full-width div containing a child span is unable to be aligned to the right

After reviewing this fiddle, I'm struggling to get my menu aligned correctly at the right edge of the overall "card". Despite trying various methods like margins, right: 0, and float, nothing seems to work as expected. In some cases, I even end up los ...

htmlcssalignment

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

htmlcsstwitter-bootstrapalignmentbootstrap-4

"Utilizing HTML aids for creating text input fields and adding line breaks

public string BannerText {get;set;} public void SetBanner() { BannerText = "This is line 1. \nThis is line 2." } on my webpage, I am displaying it like this: <div> <h1><%: Model.BannerText %></h1> </div> The issue ...

c#asp.nethtmlhtml-helperline-breaks

Enhancing NG Style in Angular 6 using a custom function

Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value. To better illustrate my query, let me present a simplified scenario: I ha ...

cssangulartypescriptng-style

Utilize CSS in the same way as the legend tag styling

I'm looking to create a stylish border around my HTML component. While I know the HTML legend element can achieve this, I want to use it outside of a form. For reference on using HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml ...

htmlcsslegend

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

After creating an empty webform page in asp.net, the generated code looks like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Threetier.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org ...

javascriptjqueryhtmlcssasp.net

Eliminating excess space beneath nested images while adjusting the size without distorting the image

Struggling with getting an image to scale properly inside a nested div in a fluid layout. Looking for advice on how to prevent the image from becoming smaller than its parent div. EDIT: Here is an updated CodePen link demonstrating that using min-height s ...

htmlcssfluid-layoutfluid-images

Interested in incorporating dynamic calendar entries in ASP C#?

Here is the code snippet I utilized: <script> var count = 1; var limitValue = 3; function addNewInput(sectionName) { if (count == limitValue) { alert("You have reached the limit of adding " + count + " inputs"); ...

javascriptc#asp.net

Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and i ...

javascriptjqueryhtmlcssjquery-ui

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Setting the height of a child div: A step-by-step guide

Within a nested div with a height of 48px and positioned relatively, there is another child div also with a height of 48px. The goal is to set the maximum height of the child div to 80% and the minimum height to 40%. However, even after applying these sett ...

htmlcss

Unexpected outcomes arise when splitting Regex with a semi-colon

I am attempting to separate a string that is presented in the following format: 9A ##{Indie; Rock}## (This particular string originates from an mp3 tag via TagLib) The code I am using is as follows: string[] parts = Regex.Split(comment,"##{"); ...

c#asp.netregexsplit

Enhance the appearance of a row on the table with a lumin

Is there a way to create a glowing effect around a single row in a table, similar to the style shown in this example? Here's the code that can help achieve this effect, sourced from CSS/HTML: Create a glowing border around an Input Field .glowing-bo ...

javascriptjqueryhtmlcss

Create and transmit an array of JSON objects

I need help with defining and sending a JSON object array. While I've managed to define a single JSON object, convert it into a string, and send it, I'm stuck on how to do the same for an array of objects. It seems like there might be a simple so ...

asp.netjavascriptjson

Creating a new role with RoleManager ApplicationRole

Recently, I developed a method to add new roles in a more efficient way by utilizing the following code snippet: public async Task<IActionResult> CreateRole(ApplicationRoleModel model) { try { foreac ...

c#asp.netasp.net-web-apiasp.net-core.net-core

Tips for transferring information from list view to database in an ASP.NET environment

I am trying to update all rows from a list view to the database. I have defined string variables for string data and double variables for float data. I am running a loop to fetch all data from the list view to variables, but unfortunately, it is not exec ...

c#asp.net.netsql-serverasp.net-mvc

Troubleshooting: CSS Pseudo :after doesn't apply to an anchor tag

I've created a pseudo CSS style for an anchor tag, which was working fine before. However, for some reason, it's no longer working. I tried using Chrome inspect element to add the CSS but it's not being read by the anchor tag. @font-face ...

htmlcsspseudo-element

Tips for removing commas and periods from the beginning or end of words

In my .NET web project, I am attempting to extract all the words from a text divided into 3 paragraphs. However, if the sentence ends with a dot like this: "This is an example sentence." Then the last word is stored in the database with the dot attached. ...

sqlasp.nettrim

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

"Responsive header design using Bootstrap for both desktop and mobile devices

Is there a way to create a header that adjusts its width based on the device viewing it, with maximum width for desktop and no padding for mobile? Here is an example of the code: <div class="row"> <div class="span12"> ...

csstwitter-bootstrap