17

So I have to print some Stack Overflow pages and bring them around. Just accept it.

Problem: while pages may look perfectly normal on the web, something recently broke the print layout... a huge whitespace block showed up on the right (normal, print). Tons of whitespace. This is on every site on the network (example) on a bunch of different screens (example).

Futzing with DevTools, the problem seems to be the following piece of css:

#mainbar, .mainbar {
    width: calc(100% - 300px - 24px);
}

Can someone check if this is the only issue and possibly fix this?

  • 2
    Print probably should not show the navigation sidebar, either, but that change looks like it would be a nice-to-have compared to at minimum getting rid of that huge space on the right. – doppelgreener Oct 18 '18 at 21:30
  • 1
    @Sonic - see this, not just a problem for printing questions... it's on a bunch of other pages as well. – eykanal Oct 18 '18 at 21:32
  • 1
    Just wanted to make it clear the question was on-topic, as we do get a lot of off-topic questions which others vote to close quickly without much thought. – Sonic the Inclusive Hedgehog Oct 18 '18 at 21:33
  • 2
    Always recommended: Stack Printer – No Distraction Wizard Oct 19 '18 at 9:00
3

This is not a fix for the main site but using the mobile site to print pages works fine enter image description here

Here is a preview of the printout.
enter image description here

3

The suggested fix is correct. It seems that the CSS in question (width: calc(100% - 300px - 24px);), is used to reduce the width to make space for the sidebar, which is 300px wide with a 24px left margin. However the sidebar is hidden (with display:none) in print view but the width of the content section is not allowed to fill the remaining space.

I wrote some javascript code which appends a style block with the appropriate css ruleset so that the width is set to 100% but only in print view. It also executes the window.print() function. The code can be used as a bookmarklet (by copying the code to your bookmark toolbar).

Here is the code:

(function() {
    var css = '@media print {#mainbar, .mainbar {width: 100%;}}';
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));

    document.head.appendChild(style);
    window.print();
})();

To use it, just run the following snippet and then drag the link into your bookmark toolbar. The code is in the link but minified.

<a href="javascript:(function(){var css='@media print {#mainbar, .mainbar {width: 100%;}}';var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode(css));document.head.appendChild(style);window.print()})();">Print with Fix</a>

This of course is just a work-around while we wait for the real fix.

By the way, the real fix would simply look like this:

@media print {
    #mainbar, .mainbar {
        width: 100%;
    }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .