problems positioning a jquery.draggable() div for printing with @media print

Question

I have a web application that has a draggable div I need to print when the user selects print from the web browser.

The most succinct advice I found so far is this stack overflow answer, where it is suggested I make my page invisible and display #plotArea only for @media print like so:

@media print {
    body * {
        visibility: hidden;
    }
    #plotArea, #plotArea * {
        visibility: visible;
    }
    #plotArea {
        /* this positioning ignores .draggable() divs */
        position: absolute;
        left: 0;   
        top: 0;
    }
}

However, because this div is draggable, I cannot for the life of me remove the offset such that the div positions itself properly for printing. Is it possible to temporarily remove the offset somehow for a draggable div? Below is the div's jquery / css

//jquery
$( "#plotArea" ).draggable().offset({ top: 15, left: 400});

/* css */
#plotArea {
    background-color: #FFFFFF;
    width: 42em;
    height: 54.5em;
    float:left;
    font-size: 12pt;
    overflow:hidden;
}

Answer 1

So what you are saying is that the draggable plugin is applying inline styling to your #plotArea div and therefore overwrites the positioning css you add to it with your print media query?

What you need to do is reset it's positional values for top/left, etc to auto and use the !important rule overwrite to overwrite the inline styles applied to it via the javascript plugin.

For example;

@media print {
    #plotArea {
        left: auto !important;   
        top: auto !important;
    }
}