CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Geo
Geo

Reputation: 302

Printing bootstrap 4 HTML page in Chrome cuts off chrome header/footers

I have an issue with printing an HTML page styled with Bootstrap 4 (only 4, 3.3.7 works fine) from Chrome where the header and footer are partly covered up. Here is a screenshot of what I'm referring to, you'll see the date, title, file/url are partly cut off. It seems be an issue with bootstrap. I created a small test page with nothing but a link to the bootstrap cdn and it still happens.

Here is the HTML as a test:

<html>
    <head>
        <link rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
            crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

If you put that into an html page and then open it in chrome and right-click -> print, you should see the same results.

Any ideas how to fix?

Upvotes: 6

Views: 2932

Answers (3)

gpmetheny
gpmetheny

Reputation: 220

Currently, this rule in bootstrap's _print.scss seems to be the culprit:

// Specify a size and min-width to make printing closer across browsers.
// We don't set margin here because it breaks `size` in Chrome. We also
// don't use `!important` on `size` as it breaks in Chrome.
@page {
  size: $print-page-size;
}

Although the code comments say that "margin...breaks `size` in Chrome," I didn't find that to be the case. Setting margins, rather than changing the size property directly, preserves bootstrap's other helpful page formatting. A margin-top rule pushes content below the page header (date and title), and a margin-bottom one clears the page footer (url and page #).

@page {
  margin-top: 48px;
  margin-bottom: 48px;
}

Upvotes: 0

Mike
Mike

Reputation: 980

Rather than include an additional @page { size: auto; } rule override the $print-page-size: auto; variable before importing the bootstrap scss file:

https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Upvotes: 1

pawel
pawel

Reputation: 508

The issue seems to be that the size property is set to a3 in the full bootstrap css file (not the grid or reboot) in version 4.1.1 (most recent version at time of writing)

to fix add following snippet:

@page {
    size: auto;
}

Upvotes: 10

Related Questions