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

Answer 1

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

Answer 2

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