MrMoxy
Reputation: 442
Printing page without wide margins
I have spent several hours of trial and error and Googling this issue. This page views correctly on screen, but when I try to print it, the margins are too wide and the invoice collapses on itself. How do I make the left and right margins smaller when printing?
- The @page directive is completely ignored.
- The styles for media="print" are completely ignored.
UPDATE: It does not seem to be an issue of margins per se, but that the width of "container" is significantly smaller than the page I am printing on (US letter).
I won't post all the variations I've tried, but this page does not print correctly in Firefox:
<html>
<head>
<title>Invoice</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<style>
@page {
margin: 15mm 25mm !important;
.container {
width:100%;
padding-left: 0px;
padding-right: 0px;
}
}
</style>
<style type="text/css" media="print"> body { margin:0px; } .container {width:100%;}</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header text-center">
Invoice
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-sm-2">
<img src="/images/logo-for-website.png" width="150px">
</div>
<div class="col-sm-7">
<b><div>Partaker App Project</div>
<div>123 Easter Ln</div>
<div>Centennial CO 80111</div></b>
</div>
<div class="col-sm-3">
<div>Date: 3/2/2022</div>
<div>Invoice # 68</div>
<div>Due date: 6/16/2022</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-sm-2">
</div>
<div class="col-sm-5">
<h6 class="mb-3">Bill to:</h6>
<div>
<strong>Client at ASU</strong>
</div>
<div>Attn: Hermon Johnson</div>
<div>United States <br /> </div>
<div>Tempe, AZ 80222</div>
</div>
<div class="col-sm-5">
<h6 class="mb-3">Ship to:</h6>
<div>
<strong>Client at ASU</strong>
</div>
<div>Super Admin</div>
<div>United States <br /> </div>
<div>Denver, Denver 80222</div>
</div>
</div>
<div class="table-responsive-sm">
<table class="table table-bordered">
<thead>
<tr>
<th width="82%">Item Description</th>
<th width="18%" class="text-right" style="padding-right:20px;">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left strong">App setup - 100 users</td>
<td class="text-right" style="padding-right:20px;">$0.00</td>
</tr>
<tr>
<td class="left strong">Annual subscription - 100 users — June 23, 2022 – June 23, 2023</td>
<td class="text-right" style="padding-right:20px;">$58.00</td>
</tr>
<tr>
<td class="left strong">
<br>
Please mail a check to the address above or pay online here: <br>
<a target="_blank" href="https://melio.me/appproject">https://melio.me/appproject</a>
<br>
Please indicate the invoice number when making your payment.
<br>
<br>
If paying by Melio, please allow 5 business days for your payment to reflect in your account.<br>
If paying by check, please allow 10 business days for your payment to reflect in your account.
<br> <br>
</td>
<td class="text-right" style="padding-right:20px;"></td>
</tr>
<tr>
<td class="text-right">
<h4><b>Total</b></h4>
</td>
<td class="text-right" style="padding-right:20px;"><h6><b>$58.00</b></h6></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
And if my in-page style is this, it still does not work. I'm using the current version of Firefox in Windows 11.
<style>
@media print {
body {
margin: 0;
padding:0;
}
.container{
margin:0;
padding:0;
width:191mm !important;
}
}
@page {
size: 8.5in 11in;
margin: 15mm 25mm !important;
}
</style>
Upvotes: 2
Views: 2219
Answers (2)
Chris Mo
Reputation: 47
The inside of an @page block should include paper sizing - not margins or constraints.
Try replacing:
margin: 15mm 25mm !important;
with:
size: 8.5in 11in;
(or whatever size paper you want).
Then check your print preview and you should see your reduced margins.
You can also remove the .container styles inside of your @page block.
!! UPDATE - FIREFOX USERS !!
@page and Firefox don't get along (most descriptors). You can remove all of your current print styles and paste in the following:
<style>
@media print {
.container {
padding-left: unset !important;
padding-right: unset !important;
max-width: unset !important;
}
}
</style>
This will negate default grid styling of the container class.
You can also play with things like NEGATIVE left and right margins to get even wider.
IMPORTANT - you'll also want to go into your print settings for Firefox and change margins to "none." Otherwise it'll override these CSS settings.
Upvotes: 1
MrMoxy
Reputation: 442
Here's my solution (unless somebody has a better one).
- I got rid of the Bootstrap "Container" style which seems to be the source of the problem and replaced it with my own "Invoice" style.
- I combined the columns with the logo & address and floated the image left.
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<style>
@media screen {
#invoice {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
max-width:1140px;
}
}
@media print {
#invoice {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: 0;
margin-left: 0;
}
body {
margin: 0;
padding:0;
}
.container{
margin:0;
padding:0;
width:191mm !important;
}
}
@page {
size: 8.5in 11in;
margin: 15mm 20mm !important;
}
</style>
</head>
<body>
<div id="invoice">
<div class="card">
<div class="card-header text-center">
Invoice
</div>
<div class="card-body">
<div class="row sm-4">
<div class="col-sm-9">
<img src="/images/logo-for-website.png" width="150px" style="float:left;">
<b><div>App Project</div>
<div>123 Easter Ln</div>
<div>Centennial CO 80111</div></b>
</div>
<div class="col-sm-3">
<div>Date: 3/2/2022</div>
<div>Invoice # 68</div>
<div>Due date: 6/16/2022</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row sm-4">
<div class="col-sm-2">
</div>
<div class="col-sm-5">
<h6 class="sm-3">Bill to:</h6>
<div>
<strong>Client at ASU</strong>
</div>
<div>Attn: Hermon Johnson</div>
<div>United States <br /> </div>
<div>Tempe, AZ 80222</div>
</div>
<div class="col-sm-5">
<h6 class="sm-3">Ship to:</h6>
<div>
<strong>Client at ASU</strong>
</div>
<div>Super Admin</div>
<div>United States <br /> </div>
<div>Denver, Denver 80222</div>
</div>
</div>
<div class="table-responsive-sm">
<table class="table table-bordered">
<thead>
<tr>
<th width="82%">Item Description</th>
<th width="18%" class="text-right" style="padding-right:20px;">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left strong">App setup - 100 users</td>
<td class="text-right" style="padding-right:20px;">$0.00</td>
</tr>
<tr>
<td class="left strong">Annual subscription - 100 users — June 23, 2022 – June 23, 2023</td>
<td class="text-right" style="padding-right:20px;">$58.00</td>
</tr>
<tr>
<td class="left strong">
<br>
Please mail a check to the address above or pay online here: <br>
<a target="_blank" href="https://melio.me/appproject">https://melio.me/appproject</a>
<br>
Please indicate the invoice number when making your payment.
<br>
<br>
If paying by Melio, please allow 5 business days for your payment to reflect in your account.<br>
If paying by check, please allow 10 business days for your payment to reflect in your account.
<br> <br>
</td>
<td class="text-right" style="padding-right:20px;"></td>
</tr>
<tr>
<td class="text-right">
<h4><b>Total</b></h4>
</td>
<td class="text-right" style="padding-right:20px;"><h6><b>$58.00</b></h6></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Upvotes: 0
Related Questions
- CSS to specify full page width at printing?
- Margin while printing html page
- CSS Printing with overflow and margins
- Print page to div sizing
- How to control page margin when printing HTML document?
- reduce page height width when printing web page
- Page Margins for printing in CSS
- Setting page margins on print
- How to give some space to every page in printing only using css
- Print a web page without cuting a div