CODEWITHSUNDEEP
jqueryasp.netcsstwitter-bootstrap
Mendes
Mendes

Reputation: 18451

Bootstrap style no applying to print

I have the following code to print a table that is held by my application:

    var elementToPrint = this.mainTable.get(0);

    newWin = window.open("");
    newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>' +
                        '</head><body class=\'visible-print\'>');
    newWin.document.write(elementToPrint.outerHTML);
    newWin.print();
    newWin.close();

Where this.mainTable is a jQuery object.

At my common page (_Layout.cshtml) I have:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />

    <title>MyApp</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="all">
    <link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="all">
</head>

The print routine runs fine, except that it looses all styling, printing plain text with unformatted data (side by side data).

I need to keep the original bootstrap layout (colors, borders, strips, etc.). What please needs to be changed...

Thanks,

Upvotes: 1

Views: 3700

Answers (1)

Tharaka
Tharaka

Reputation: 2395

When you create a new window, it essentially creates a new html page which DOES NOT inherit from your master page. Thus the new html page will not have your bootstrap css references.

You should be adding these bootstrap css references while you document.write the as follows,

newWin.document.write('<html><head><title>' + elementToPrint.caption + '</title>');
newWin.document.write('<link href="Your-Path/bootstrap.min.css" rel="stylesheet" />');
newWin.document.write('<link href="Your-Path/bootstrap-theme.min.css" rel="stylesheet" />');
newWin.document.write('</head><body class=\'visible-print\'>');

UPDATE Standard twitter-bootstrap does contain css rules for media type Print as follows, which removes any screen css rules,

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

You need to get a custom bootstrap, with out "Print media styles" (Recomended) OR manually remove these @media print.

Here is a Plunker that shows Printing with Bootstrap CSS styles

Upvotes: 1

Related Questions