Printable Pages on Kentico 13

Robert Locicero asked on April 10, 2024 20:02

Right now a page I have, when I click Print on it, just returns 3 empty blank pages.

I'm on Kentico 13 and can't find any documentation to do what was explained here in Kentico 9

Do I need to implement this and have a special button to get print to load properly, or is there simply something im missing.

Thanks your your help.

I've went ahead and done this, and linked the styles to the page, but its still blank. Is there any other specific things that Kentico might be doing to alter this?

CSS

@media print {
    body * {
        display: none;
    }

    #invoice, #invoice * {
        display: block !important;
    }
}

cshtml page

<link href="/linkTo/style-sheet.css" rel="stylesheet" />
<div class="container pt-3" id="invoice">
    <div class="text-center">
        <h2 class="orderDetails-heading">Details for Order  #@order?.OrderInvoiceNumber</h2>
    </div>
    <div class="d-md-flex justify-content-between">
        <div>
            <p class="mb-0">
                <strong>Order Placed:</strong>
                @order?.OrderDate
            </p>
            <p class="mb-0">
                <strong>Order Number:</strong>
                @order?.OrderInvoiceNumber
            </p>
            <p class="mb-0">
                <strong>Order Total:</strong>
                @order?.OrderGrandTotal.ToString("C")
            </p>
        </div>
    </div>
</div>

and I know the style sheet is working, because when I comment out the body style, it goes from 3 pages to 1 page, but all pages are staying blank, despite trying to alter #invoce and its children.

Correct Answer

Brenden Kehren answered on April 15, 2024 21:50

Unfortunately, It's typically not that simple. Hiding the whole <body> tag and setting !important flags isn't the best approach at all. I'd create a separate print stylesheet that hides all the elements you want hidden (header, nav, footer, side nav, etc.). Then set proper styles for areas you want to display.

Properly referencing a stylesheet can be done like so:

Main site stylesheet:
<link href="/path/to/print.css" media="screen" rel="stylesheet" />

Print only stylesheet
<link href="/path/to/print.css" media="print" rel="stylesheet" />

0 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on April 10, 2024 22:11

I'd highly recommend using a separate style sheet and in that stylesheet you define your print styles. Then the user can simply the use CTRL+P or Print functionality in the browser to print a given page. There's no need to create a separate page to do this work unless you need some heavy customizations.

0 votesVote for this answer Mark as a Correct answer

Robert Locicero answered on April 15, 2024 20:51

I've went ahead and done this, and linked the styles to the page, but its still blank. Is there any other specific things that Kentico might be doing to alter this?

CSS 

@media print {
    body * {
        display: none;
    }

    #invoice, #invoice * {
        display: block !important;
    }
}

cshtml page

<link href="/linkTo/style-sheet.css" rel="stylesheet" />
<div class="container pt-3" id="invoice">
    <div class="text-center">
        <h2 class="orderDetails-heading">Details for Order  #@order?.OrderInvoiceNumber</h2>
    </div>
    <div class="d-md-flex justify-content-between">
        <div>
            <p class="mb-0">
                <strong>Order Placed:</strong>
                @order?.OrderDate
            </p>
            <p class="mb-0">
                <strong>Order Number:</strong>
                @order?.OrderInvoiceNumber
            </p>
            <p class="mb-0">
                <strong>Order Total:</strong>
                @order?.OrderGrandTotal.ToString("C")
            </p>
        </div>
    </div>
</div>

and I know the style sheet is working, because when I comment out the body style, it goes from 3 pages to 1 page, but all pages are staying blank, despite trying to alter #invoce and its children.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.