I'm using angular material version 9.2.4 and created a data table with pagination. I want my users to be able to print this table, I already removed every unnecessary element from the page with #media print, but the table's behavior is weird. I want my table rows to break to a new page if it cannot fit the page because of the number of rows, but it just skips the remaining data.
What I've tried so far:
Adding this to my css:
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
display: inline-block;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
Wrapping all table elements inside div, because I've read that the above CSS properties can ignore non-block-displayed elements.
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
Any other ideas?
I had the same problem but this has nothing to do with mat-table. This solution is highly specific to the rest of your page but this worked for me. I have a sidenav component with perfect-scrollbar and this caused the height to be limited.
I added this to master-layout.component.scss
#media print {
.mat-drawer-content {
height: auto !important;
}
.mat-drawer-container {
overflow: inherit !important;
}
perfect-scrollbar {
height: auto;
max-height: none;
}
mat-sidenav-container {
overflow: inherit !important;
}
}
More usefull will probably be the way I came to this. Open the DevTools of your browser and enable "Emulate CSS media Type", set it to "print". You can now inspect your page and the #media print tags will be enabled.
Now go over the elements and look at the renedered height. It should be larger than your window. If it's not, it must be limited by overflow: hidden, height: 100% or max-height: 100%. Adjust CSS so these are set to auto or inherit. Go up the elements untill none of the heights are limited to the window size.
Related
It works fine on Microsoft edge.
The following worked on one page. However, there is this error in the core of the project.
#media print {
html, body {
height: 100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
}
While printing some pages, it does not add a blank page to the last page.
The same behavior is observed when trying to print a Google map.
Workaround is here.
https://support.google.com/chrome/thread/191619088?hl=en&msgid=192661374
Try removing the extra page-break-after for the last elements in the DOM.
I changed my css from this
.page {
page-break-after: always;
}
to this:
.page:not(:last-child) {
page-break-after: always;
}
I had the same problem after the last chrome update.
I have a multi-page break One after the other, and it prints an n-1 blank page.
For that, I changed my code to hide all page breaks except the first one.
Old Code
div.pagebreak {
page-break-before: always !important;
clear: both !important;
}
new Code
div.pagebreak {
display: none;
}
.single-page+div.pagebreak {
break-before: page !important;
clear: both !important;
display: block !important;
}
I have a problem with the fact that, when I try to print a page, every link gets the URL between () behind it. I have found multiple questions here, and the solutions work. I have one other problem, on top of that, though: My styles in print.css seem to be ignored after adding a solution.
My CSS
.header-breadcrumb {
margin-top: 0 !important;
}
.nonPrint, hr, .shows-more, #videoGallery{
display: none;
}
.single-event .container .col-md-9 {
width: 70%;
float: left;
}
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
.single-calendar .table-responsive table tbody tr td {
padding: 2px 5px;
}
.single-description {
font-size: 10pt !important;
}
h1 {
font-size: 12pt !important;
}
.printLogo {
display: block !important;
width: 200px;
padding-left: 10px;
}
But when I add
a:after {
display: none;
content: "";
}
the font-sizes get ignored and jumps back to their original values (or so it seems). How do I fix this?
On the left you see the file as it should look like (including a link in the sidebar on the right, which has to be removed), and on the right you see the file with the href removed, but where the all new styles in print.css seem to be ignored.
Disregard what I said before. The difference in styling came from the following:
Because of this CSS, the sidebar has to fill 30%:
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
But since it output a URL which could not be broken until the first -, being 30% wide meant resizing the font (which Chrome did automatically). Hiding the URL made it possible to actually apply the font-size I tried to apply through the CSS, making everything bigger than in the original file, where it actually DIDN'T listen to the CSS.
Facepalm
This might be useful in the future for 2 other people, so I'll leave the question here.
I want to print a large table (so large that its rows are approx. 3 sheets of papers wide) from HTML. If possible, CSS should suffice for layout and the solution should work with different browsers.
I'm currently defining the following style rules:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
When I inspect the DOM elements e.g. in Firefox 33.0.2 (on OS X) I can see that the rules are recognized, but then when I look at a print preview ( File | Print | PDF | Open PDF in Preview) all columns that don't fit on the first page are cut off, i.e. I receive 1 page of printed output instead of 3. I have also tried Internet Explorer 11 and 10 to the same effect.
So how can I layout large HTML tables (ultimately large both in terms of columns an rows) for print out using CSS?
Bonus question: If page-break style components indeed only apply to block-level elements as is indicated in this previous answer, would it help if I construct my table from divs instead of tds when aiming for print output?
UPDATE
Here is a relevant sample that I just tried on JSFiddle. (I don't have an account there, so FWIK I cannot provide a direct link.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
If I try to print this table (e.g. by applying This Frame | Print Frame ... | PDF | Open PDF in Preview to JSFiddle's Result view in Firefox 33.1 for OS X and for Paper Size/Orientation A4/Portrait) I get one page of output. All columns but the first and part of the second are cut off.
You absolutely need to move away from a table if you need readable vertical printing on the page. Tables are great for display on the page when it's tabular data but are not a viable solution for printing as they don't respect flow.
There are plugins (like this one here, no affiliation – just a Google result) that will do this automatically for you, but here's the example. When you use this, make sure that the #media print is listed appropriately. To test locally, you can change that to #media screen.
That won't show the #page rules listed, but those are visible via a print preview.
Hope this helps:
Fiddle for printing in portrait
HTML
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
CSS
#media print {
#page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Edit - Printing horizontally across several pages:
Okay, so this is probably a far less common use case, and we have to do some goofy things with it – so fair warning. I'll try to explain this step-by-step as it's cryptic and obnoxious.
Fiddle for printing in landscape here!
CSS
#media print {
#page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
This is the part that matters, as it's setting your print directives. Most of this is stuff we've seen in the original (with some tweaks as I was playing with it).
The part we care about comes here:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
What we're doing is flopping the whole thing on its side, and then sliding it to where we expect it to be. translate(8.5in, -100%) is telling the browser – Slide this element 8.5 inches (the width of a standard letter paper in the US) to the right, and then slide it up 100% of its height (the negative indicates up as opposed to down). We slide it to the right 8.5 inches so that it'll appear at the top of the page when rotated. We slide it up its calculated height so that we don't have an ugly gap to the left of the table when the rotation happens either.
Then, we instruct it that we want all of those calculations run in relation to the bottom left of the element's normal position in document flow. This keeps this crazy long table from being rotated way off to the right by setting the left property. The bottom property is important because we're rotating it clockwise a quarter turn, and if we did that from the top, it would be off the page to the left. That quarter turn is described in the next part of the transform statement: rotate(90deg);
Voila. The thing prints across multiple pages.
Before you ask: No. There is no way to prevent the page break inside the element of which I'm aware. I know it's obnoxious, ugly and all that garbage, but we can only work with the tools which we're given.
Update Firefox confirmed working:
page-break-inside: auto; is the default style, so unless you have a rule setting them differently, those rules will do nothing.
If your table isn't being broken onto multiple pages, then it's most likely because there some other rule you added, which prevents it - my guess an overflow: hidden.
What you first should do is remove all styles, and see if that prints on multiple pages. If yes, start adding your styles back (rule by rule, or if necessary line by line) to find the problem.
If you want to force page break you should use page-break-before or page-break-after. You need to know that the styled element should contain a non-empty block-level element and that it can't be absolutely positioned. However it is quite inconsistent on tables elements. Which leads us to your last question : yes, it would be more consistent to build your tables with divs.
However, considering what you want to achieve (printing large horizontal tables) you should know that trying to fit 3 pages into 1 can't work as your content won't be readable. As a matter of fact, the only best practice would be to use a vertical layout instead (just for print or for both web and print).
Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}
I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.
the print media css that is not working is this:
#gc {
width: 100%;
}
#asideTrack {
/* width: 100%;*/
display: none;
}
.asideTrack {
/* width: 100%;*/
display: none;
}
.slideAside {
/* width: 100%;*/
display: none;
}
#slideAside {
display:none
}
Any suggestions?
In CSS lower rule overwrites the top if they have the same priority (depending on selector)
You write your common css not in #media block, and it is lower then your #media print block, so it overwrites your #media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of #media print block where you say it is 100%).
I hope it is helpful.
Solutions
In your css file you may place media print block to the end of file.
Add !important directives to some rules in media print block. ie:
p {
color: red !important;
}
Place your special css for screen in media screen block.