Disable equal heights JS on print stylesheet

Question

Hi everyone,

I have my own simple equal heights code in jQuery to make two columns the same height:

var content = $("#content");
var sidebar = $("#sidebar");
var maxHeight = Math.max(content.height(), sidebar.height());
content.height(maxHeight);
sidebar.height(maxHeight);

This JS file is included in my header file. I have a print stylesheet and the height of the #content div is an issue when this JS is run. I need to make the jQuery code not happen when on this print CSS. Any ideas?

Answer 1

Two options:

1) On the server side, you could not include the JS output for the print view if you're using a secondary view for print layout.

2) You could also add !important to your print css properties to prevent them from being overridden. That should work for some browsers. Have you tested it on multiple browsers? Do you know what browsers that you want to support? Also how are you including your CSS? <link rel="stylesheet" type="text/css" media="print" href="foo.css">?

Either of these options should work for you. If you have a separate page view when they click the print icon, you can go with the first. Otherwise, you can use the second and do something like #mydiv { height: 200px !important }.