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...

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. — miguel-svq, Dec 20 '15 at 12:34
@miguel-svq 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...!! — Sagar Naliyapara, Dec 20 '15 at 12:37
@SagarNaliyapara check [this](https://jsfiddle.net/alireza_safian/ceh185bw/4/) I checked in Chrome v 47.0.2526.106 m and it works. — Alex, Dec 21 '15 at 07:02
@SagarNaliyapara did you solve your problem ? how dose it work like on of the Q or other way ? — J.Tural, Dec 27 '15 at 12:21
@J.Tural Working upto version of 47 but not in 48 beta of chrome — Sagar Naliyapara, Dec 28 '15 at 04:42

J.Tural · Accepted Answer · 2015-12-28T15:23:39.933

4

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;
}
}

edited Dec 28 '15 at 15:23

answered Dec 23 '15 at 05:07

J.Tural

1,365
11
28

Working upto version of 47 but not in 48 beta of chrome – Sagar Naliyapara Dec 28 '15 at 04:40
I edited the fiddle there was missing `;` chrom beta no one use ... you can not update to it automatically .... see the use http://www.w3schools.com/browsers/browsers_chrome.asp 48 its beta have problems but my solution work ... + now focus on 46 its the most used . – J.Tural Dec 28 '15 at 15:26
1

helpful answer but not global solution – Sagar Naliyapara Jan 04 '16 at 10:53
its not global because his problem is more about the over ride of properties he predefined – J.Tural Jan 10 '16 at 13:23

score 3 · Answer 2 · answered Dec 21 '15 at 06:41

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;
}
}

Working upto version of 47 but not in 48 beta of chrome – Sagar Naliyapara Dec 24 '15 at 12:58 — Sagar Naliyapara, Dec 24 '15 at 12:58

score 0 · Answer 3 · answered Feb 11 '16 at 13:13

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!