Print preview shows one div in wrong position

Question

I created a plot in javascript and wanted to show a legend for the plot overlapping the plot. The function creating this plot doesn't allow an overlapping legend directly, but it leaves you the possibility to place the legend in a separate div. So I made these two divs:

<div id="ContainingLegend">
  <div id="VariablePlotLegend">
  </div
</div>

So the legend will the placed in the div VariablePlotLegend.

Here are my two relevant CSS parts:

#ContainingLegend{
    text-align: center;
    margin-top: -73px; 
    margin-left: 60px;
    margin-right: 10px;
}

#VariablePlotLegend{
    padding: 3px;
    border-color: #004790;
    border-width: 1px;
    border-style: solid;
    background: #FFFFFF;
    width: auto;
    display: inline-block;
    position:relative;
    z-index:10;
}

On screen the legend is shown perfectly. On print it is shown below the plot on the left, in all black with no border etc. Why?

Unfortunately not :-( The plot is created using R, Shiny and Rstudio and the HTML source code somehow doesn't contain everything — MichiZH, Jun 10 '15 at 15:06
I'm having some trouble understanding the problem. Specifically, I have no idea what you mean by on screen or on print. Your negative margin-top might be at fault though. — MinusFour, Jun 10 '15 at 15:06

score 1 · Accepted Answer · answered Jun 10 '15 at 15:09

Margins aren't what I would personally choose for printing.

Try something like this:

HTML:

<div class='container'>
  <figure id='MyPlotChart'>
    <!-- Whatever your plot chart HTML is -->
    <figcaption id='ContainingLegend'>
      <div id='VariablePlotLegend'>
        <!-- Legend HTML -->
      </div>
   </figcaption>
  </figure>
</div>

CSS:

#MyPlotChart {
  position: relative;
}
#ContainingLegend {
  display: block;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

This gives you the benefit of being semantically correct with your HTML, and figure and figcaption already have the relationship you're after as far as positioning.

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Take a look at the print css, maybe one of the tools you are using it trying to make it look better for printing. debugging print css with chrome

edited May 23 '17 at 11:58

Community

1
1

answered Jun 10 '15 at 15:09

jbg

476
2
9

Print preview shows one div in wrong position

2 Answers2