1

I have found a very weird behavior in Chrome browser (my current version is 54.0.2840.59); when I am trying to print preview a html page that I have developed it truncates the page content, previewing less content than I have. All contents are repetitive so there is no chance that a specific element trigger that issue. From the other hand when I print preview the same page in other browsers such as (IE11, Edge, Firefox, Safari) I see the whole content! Here is my screenshot from Chrome in print preview mode: print preview truncates the rest of the page

At the image you can clearly see the end of scroll in the print preview but there is still a lot of content... Also note that I have tested this in Windows 10, iOs and even in incognito mode in case an addon would do that.

Vardalas Esteleleloulieth
  • 25
  • 5

2 Answers2

1

I just found a solution. The grid I had created was with bootstrap. There is a case about that here: https://github.com/twbs/bootstrap/issues/12078

I changed the whole grid to display table with !importants, (which solved my case). Though in the community they have changed the bootstrap column grid system in order to match width for print, which this is better solution.

Either way, the problem was that chrome use the XS size of bootstrap layout; hence it miscalculated the page height in my case.

Vardalas Esteleleloulieth
  • 25
  • 5
  • Facing the same issue. What do you mean by you changed the table with !importants. Did you have custom css that was incorrect? – TemporaryFix May 22 '17 at 17:10
  • Chrome considers the viewport to be less than 768px. So what you actually need to do is to re-style the whole grid as if it was col-xs. In my case I styled my grid as a table and table cells instead of floating. But of course you can extend col-xs-* to your elements instead of using table. I used the important rules because the selectors were stronger and I needed instant results, but this is irrelevant. – Vardalas Esteleleloulieth May 24 '17 at 14:09
0

Another more proper way to solve this is to use the following sass rules:

@media only print{
   // create grid for .col-md to work without media query
   @include float-grid-columns(md);
   @include loop-grid-columns($grid-columns, md, width);
   @include loop-grid-columns($grid-columns, md, pull);
   @include loop-grid-columns($grid-columns, md, push);
   @include loop-grid-columns($grid-columns, md, offset);
}

With those rules you make bootstrap med columns to be viewed as normal in print.

Vardalas Esteleleloulieth
  • 25
  • 5