Print preview margin of print-hidden part in chrome new version

Question

I have shown some screenshots which shows problem...

Problem:

I'm trying to print this page with only table and as shown in image with open side pane i have put that side pane into print-hidden and it was working till the version of Google Chrome 46.0.2490.71 but after next update in @media print css margin not working.

Currently my Google Chrome version is 48.0.2564.23

Sidepane Page:

New Version of chrome shows margin as shown in image of print preview and this problem occurs only in chrome browser it's working fine in all other browser

Sidepane Page Print Priview:

Without Sidepane Page:

Without Sidepane Page Print Priview:

I can't understand why new version of chrome takes print-hidden div's margin...!!

Important thing is it's not working in chrome latest update only otherwise it was fine.

Please if someone has identified print problem in latest update of chrome please let me know anyone have solution.

You can ask if you have any question to understand my problem.

Thank you...

Tried:

I have try to give negative left margin but in that case all other browser's print preview is not proper

Issue On GitHub:

GitHub Issue

Issue on Google Chrome Forum:

chrome forum issue

JsFiddle:

fiddle

In JsFiddle i have used css property margin-left but it is not working in chrome latest version after 47 it was working fine in older version upto Google Chrome 46.0.2490.71 but in next update it is the big issue in other browser it is working as usual very smoothly...

Adriannaadrianne

Unsure if I understood you properly. Do you mean that the "sidepane" have class "print-hidden" but it takes room on the page? Check that @print print-hidden class selector have "display:none" property, because "visibility:hidden" don't show it, but takes the space as if it were rendered. – Episcopalian

@Episcopalian even if i give margin-left:-200px; in @media print then it is not working in chrome in other browser this @media print is working fine...!! – Adriannaadrianne

Please, post your completed code or provide a demo. – Coelom

@SagarNaliyapara check this I checked in Chrome v 47.0.2526.106 m and it works. – Coelom

@SagarNaliyapara did you solve your problem ? how dose it work like on of the Q or other way ? – Guillermoguilloche

@Guillermoguilloche Working upto version of 47 but not in 48 beta of chrome – Adriannaadrianne

Answer 1

first check the fiddle https://jsfiddle.net/ceh185bw/11/

I did 2 things ,

1- put the print at botom

2- over ride the margin for container

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
    border: 3px solid;
}
#main-container {
    margin-left: 200px!important;
    border: 3px solid;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{
    display:none !important;
}
#main-container {
margin-left: 0px!important;
border:1px solid;
border: 3px solid;
}
#main-container {
    margin-left: 0px!important;
}
}

Guillermoguilloche

Working upto version of 47 but not in 48 beta of chrome – Adriannaadrianne

I edited the fiddle there was missing ; chrom beta no one use ... you can not update to it automatically .... see the use w3schools.com/browsers/browsers_chrome.asp 48 its beta have problems but my solution work ... + now focus on 46 its the most used . – Guillermoguilloche

helpful answer but not global solution – Adriannaadrianne

its not global because his problem is more about the over ride of properties he predefined – Guillermoguilloche

Answer 2

There are 2 problems in the css.

1) The media print should be at the end 2) by mistake you have added a comma in the code after the display:none.

@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important},
#main-container {
    margin-left: 0px!important;
}
}

The correct CSS would be:

#sidebar {
    width: 200px!important;
    opacity: 1;
    position: fixed;
}
#main-container {
    margin-left: 200px!important;
}
@media print{
.hidden-print,
tr.hidden-print,
th.hidden-print,
td.hidden-print{display:none !important}
#main-container {
    margin-left: 0px!important;
}
}

Tyson

Working upto version of 47 but not in 48 beta of chrome – Adriannaadrianne

Answer 3

The theme you are using looks fancy, so I'm guessing there is a transition involved in collapsing and showing the sidebar.

If that is the case, then the solution can be found here: https://www.lockedowndesign.com/chrome-print-preview-differs-from-dev-tools/

In short: disable all the transitions in your print stylesheet (media="print") on all elements by applying

* {
  -webkit-transition: none !important;
  transition: none !important;
}

...or wrap it up in '@media print' in a regular style sheet.

In your print style, you set the sidebar's width to 0px, but Chrome has barely started animating the width (due to the transition) when it takes the printing snapshot, hence: a margin that is still visible!

Humfrid

Answer 4

Make sure that the dir property is not used on the html element, if you do use it, change it to "ltr" before print

ex:

 printPDF() {
      const html = document.querySelector("html");
      const dir = html.getAttribute("dir");
      if (dir == "rtl") {
        html.setAttribute("dir", "ltr");
      }
      PrintElements.print(
        document.querySelectorAll(".print .content-pdf")
      );
      if (dir == "rtl") {
        html.setAttribute("dir", "rtl");
      }
    },

Tufted