CODEWITHSUNDEEP
htmlcss
SirParselot
SirParselot

Reputation: 2700

print splits page at top

I am trying to make a print.css it splits the header between two pages and I can't figure out how to where I'm going wrong

print.css

@media print {
  @page {
    size: 8.5in 11in;
  }

  html {
    box-sizing: border-box;
  }

  body > * {
    display: none;
  }

  body {
    display: inline;
  }

  #preview {
    display: inline;
    font: 12pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
  }

  #preview h3 {
    position: relative;
    top: 0px;
    left: 0px;
  }
  #preview button {
    display: none;
  }
}

html (preview gets filled with javascript)

<body style="background-color: white; height: 100%; width: 100%" onload="buildForm()">
  <aside id="overlay"> <!--overlay display is block-->
    <section onclick="edit()"></section>
    <div id="preview"></div>
  </aside>
</body>

Here is a jsfiddle of everything but it's not going to work since it's an electron app and requires some node modules

Update

Got it working with this css

@media print {
  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }
  body > * {
    display: none;
  }
  body {
    display: inline;
  }
  #preview {
    font: 12pt Georgia, "Times New Roman", Times, serif;
    line-height: 1.3;
  }
  #preview h3 {
    position: relative;
    top: 0px;
    left: 0px;
  }
  #preview button {
    display: none;
  }
}

@page {
  size: A4;
}

Upvotes: 1

Views: 51

Answers (1)

Riskbreaker
Riskbreaker

Reputation: 4791

From the looks of it 

 @page {
    size: 8.5in 11in;
  }

Is most likely the culprit. Its still viewing it in the web world and not the print preview world.

Also my advice is to have the standard print shiv before anything -

.its.visible-mobile{display: none !important;}
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; border:none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a:link:after, a:visited:after { content: ""; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
header .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }

Upvotes: 2

Related Questions